OmniAICreator/Qiita-1.07M huggingface dataset:
俺からReact, Vueを学んでみないか？リアルな電卓を作ってみよう！

# 俺からReact, Vueを学んでみないかシリーズ
無茶苦茶調子に乗ったタイトルですが、インプレッションを集めるために煽っているだけです。すみません。

誰も使ってくれないだろう無駄なもの([HTML/CSSで作る超リアルな電卓など]())をどんどんアウトプットしていこうという企画です。



## リアルな電卓はお好きですか？
今回はリアルな電卓を作成しましたwww
皆さんが想像しているよりリアルです。心の準備は宜しいでしょうか？


作成したといっても、NextjsにHTML/CSSを反映させただけですけど、、、
とはいえ、reactjsで動くように無茶苦茶修正しましたし、JavaScriptも修正が大変でした。

---


### 完成物

下記から確認できます！
[https://dashboard-next-ui.vercel.app/next-ui](https://dashboard-next-ui.vercel.app/next-ui)

![スクリーンショット 2023-12-08 14.58.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1130166/f5bb360b-f778-064a-f676-48156cceba85.png)

無茶苦茶リアルwww

**githubリポジトリ**
[https://github.com/kouhei-github/dashboard-next-ui](https://github.com/kouhei-github/dashboard-next-ui)

---

## Reactの工夫したところ
管理画面のデザインも自分で作成したのですが、ここの解説はめんどくさいのでやりません。
layout.tsxをうまく活用してください。

### 電卓の計算のロジック
計算のロジックは一筋縄では行きませんでした。

---

#### 第一の壁 四則演算の規則
皆さん馴染みの**乗算・徐算は加算・減算より優先される**
```text
1+2+3×4 = 36
```
リアルタイムで計算する電卓を想定していたので、前回の結果を元に計算したかった。
下記のように足し算を優先させる必要があった
```text
（1+2+3)×4 = 24
```

どのように実装したかというと、乗算・徐算が含まれると先頭に(をつける
```tsx
    if(func.includes("x") || func.includes("÷")){
      func ="(" + func
    }
```
乗算・徐算の前に）をつける
```tsx
    const result = func.replaceAll("x", ")*").replaceAll("÷", ")/").replaceAll("nothing", "").replaceAll("=", "")
    
```
下記のようになる
```text
（(1+2+3)×4+8)/2 = 16
```

#### 第2の壁 計算のロジックが複雑になる
計算のロジックが複雑になるため、文字列をそのままJavaScriptのコードとして実行できないか考えた。
すると**eval()** 関数なるものが見つかった
```ts
// 引数に入れた文字列を実行できる
eval("（(1+2+3)×4+8)/2") // 16
```

ただ脆弱性になりうる可能性があるため、あまりよくないらしい！

## 所感
世界でいちばん使われないだろう、リアルすぎる電卓アプリを作ったが、電卓のロジックは奥が深いことを学べた。
次はクレジット決済画面をかっこよくデザインして、デプロイしてみる。
fixed beam,a downward point load 第6章 はりのたわみと不静定はり 基本例題6.29 p180「材料力学演習(20221021)」をsympyでやってみたい。

 # オリジナル
[基本例題6.29 p180](http://zairikiweb.starfree.jp/zai_enshuh/zai_enshuh_ver.3.3.pdf#page=185)＜[「材料力学演習(20221021)一括(ver.3.3)」を勉強したい。#sympy](https://qiita.com/mrrclb48z/items/c3274daf5f7a99cfe027#%E4%BD%9C%E6%A5%AD%E4%B8%AD%E7%A7%81%E3%81%AE%E8%A7%A3%E7%AD%94sympy)
　　　　　　　　？？？タブレット等で、pdfを開く事ができないかも。？？？　
# sympyで
```python
# ver0.1 
from sympy import *

var('x,a,b,P'        ,real=True)
var('MAC,MCB,MA,MB'  ,real=True)
var('MA,MB'          ,real=True)
var('RA,RB'          ,real=True)
var('θAC,vAC,θCB,vCB',real=True)
var('θA,vA  '        ,real=True)
var('EIz,l'          ,real=True,nonnegative=True)
def myNumer_Factor_Rep(myF,rep):
     return numer(myF).simplify().subs(rep).factor()/denom(myF)
def myEq_RepLR(eq):
     return {eq.lhs:eq.rhs}
# CB間
eqvCB=Eq(vCB,vA+θA*x-1/EIz*(Rational(1,2)*MA*x**2+Rational(1,6)*RA*x**3-Rational(1,6)*P*(x-a)**3))
eqθCB=Eq(θCB,diff(eqvCB.rhs,x))                                                                     
#　RA,MA
rep0l={θA:0,vA:0 ,x:l,vCB:0,θCB:0}
sol  =solve([eqvCB.subs(rep0l),eqθCB.subs(rep0l)],[RA,MA]) #;print(sol)
#　〃
repl ={l:a+b}
eqRA =Eq(RA,myNumer_Factor_Rep(sol[RA],repl))             ;print("#",eqRA)
eqMA =Eq(MA,myNumer_Factor_Rep(sol[MA],repl))             ;print("#",eqMA);print()
#　RB
repRA=myEq_RepLR(eqRA)
eqRB =Eq(RB,solve(Eq(P,RA+RB),RB)[0])                      #;print(eqRB)
eqRB =eqRB.subs(repRA)                                     #;print(eqRB)
eqRB =Eq(RB,eqRB.rhs.factor())                             #;print(eqRB)
eqRB =Eq(RB,myNumer_Factor_Rep(eqRB.rhs,repl))             ;print("#",eqRB)
# MB
repRM=myEq_RepLR(eqRA) | myEq_RepLR(eqMA)
repxl={x:l}
eqMCB=Eq(MCB,MA+RA*x-P*(x-a))                              #;print(eqMCB)
eqMB =Eq(MB ,eqMCB.rhs.subs(repxl))                        #;print(eqMB)
eqMB =Eq(MB ,eqMB.rhs.subs(repRM).factor())                #;print(eqMB)
eqMB =Eq(MB ,myNumer_Factor_Rep(eqMB.rhs,repl))            ;print("#",eqMB)
# 
# Eq(RA, P*b**2*(3*a + b)/l**3)
# Eq(MA, -P*a*b**2/l**2)

# Eq(RB, P*a**2*(a + 3*b)/l**3)
# Eq(MB, -P*a**2*b/l**2)
```

# いつもの? sympyの実行環境と 参考のおすすめです。
(テンプレート)

https://qiita.com/mrrclb48z/items/00dd08b0317069be9342

# いつもと違うおすすめです。

#### 参考文献

＞集中荷重Pを受ける両端固定支持はり
＞JSME p94
　
＞両端固定ばり 5)
＞構造力学公式集 p146
運用に携わる人全員に見てほしい！ Ops Guidesの紹介

PagerDuty Advent Calendarの8日目！

https://qiita.com/advent-calendar/2023/pagerduty

今日はOps Guidesのお話です。

## うちはこうだけど、他はどうやってるんだろう？
普段から運用に関わっていると、ふとした瞬間に「そういえば他の会社ではどういう運用をやっているんだろう？」と気になること、ありませんか？

そのきっかけは「本当になんとなく」といったものから「上手くいかない運用にフラストレーションが溜まって」というどす黒いものまで色々あると思いますが、いずれにせよ「他の会社の良いところを取り入れて、自分たちの運用を改善したい」という気持ちから来ているのは間違いないでしょう。

だからこそ、いろんなミートアップに参加して発表を聞いたり、懇親会で話してみたり、Xに垂れ流されているいろんなポストを読んで事例を学ぶわけです。

## ベストプラクティスを学びたい!

このような取り組みはとても良いことですし、是非とも継続して情報収集してもらいなと思います。ただ一方、時間効率の観点ではあまり効率がよくありません。情報収集は大事なんだけど、本当に運用で切羽詰まっているときにそれをやるのは難しい。

でも、情報収集できないから運用の改善ができず、ずっと忙しいまま･･･ジレンマですね。

そんなときに役立つのが、「ベストプラクティス」です。実績に裏付けされた、よく整理され体系化された考え方を学ぶことで、効率よくノウハウを吸収することができます。「巨人の肩の上に立つ」とも形容されますね。

普段から忙しい、運用に携わる方全員に対してPagerDutyが提供したい「巨人の肩の上に立つ方法」　それが、Ops Guidesなのです。

## Ops Guidesとは

Ops Guidesとは、PagerDutyが公開している、リアルタイム運用のベストプラクティスです。

https://www.pagerduty.com/ops-guides/

![CleanShot 2023-12-08 at 15.08.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/17840/02fa5733-3dd3-3a41-2f35-d540c78153b5.png)


長年にわたりPagerDutyがシステム運用していく中で得られた知見。それらがPagerDuty社内にはたくさん蓄えられています。これを整理して公開しているものが、このOps Guidesです。

2023年現在、以下の12のガイドが公開されています。

* Incident Response
* Full Service Ownership
* Auto Remediation
* Best Practices for On Call Teams
* Postmortems
* Retrospectives
* Operational Reviews
* DevSecOps
* Security Training
* Internal Stakeholder Communications
* Customer Service Operations
* Business Incident Response

いずれも運用においては重要になってくる要素ばかりですね。

インシデントレスポンスや自動修復は当然として、内部ステークホルダーとのコミュニケーションの話や、カスタマーサービス運用までもが解説されているのは、網羅的でとても良いなと思っています。確かに、自分が運用をやっていたときはそのあたりに悩まされたなぁ･･･と。

ちなみに、運用に携わる全ての人に参考にして貰えるよう、PagerDutyのプロダクトの有無に関わらず読めるような構成になっています。

https://x.com/agnozingdays/status/1732602488766021729?s=20

https://x.com/kakakakakku/status/1732342249713987795?s=20

## 日本語のガイドはないの？

PagerDuty公式のガイドはいまのところ英語のみになっています。いずれも日本語であればもっと役にたてるのになぁと思う内容ばかりなので、日本語化頑張りたいですね🇯🇵

Incident Responseのガイドに関しては、有志が日本語化したものが存在します。これ単体でものすごく役に立つので、是非参考にしていただければと思います。

https://ueokande.github.io/incident-response-docs-ja/

## その他関連情報

PagerDutyではブログも積極的に公開しています。

例えばオンコールのチーム作りとして重要なことを記したこういう記事もあります。

https://www.pagerduty.co.jp/blog/the-human-side-of-being-on-call-5-lessons-for-managing-stress-anxiety-and-life-while-being-on-call/

こういった情報も、豊富なOps Guidesの知見があるからこそ発信できるものだと思っています。

https://goingoncall.pagerduty.com/culture/#iteration-and-improvement

Blog、 Ops Guidesともに積極的に参照していただき、みなさまの組織内に持ち帰って独自の運用ルールに発展させてもらえると嬉しいです。

では！
Teraterm 自動ログイン＋ログ保存＋踏み台経由接続

teraterm は非常によく使うけど案件毎に作ったりする割に全部盛りな物作ってなかったので。
サーバー経由が無い場合や不要なところは消していくスタイルで。
（ただちょっとログがイケてないので時間があればそのうち多分対応しまｓ）

```
;;;;踏み台
hostname = '192.168.1.100'
username = 'hoge'
password='hogehoge'

;;;本命行先
hostname2 = '192.168.2.200'
username2 = 'huga'
password2 = 'hugahuga'

;;;;Log file settings;;;;;;;;;;;;;;;;;;;;;;;;;;
LOGSPATH = 'C:\Users\hogeuser\teraterm\log'
getdate LOG_NAME '\%Y%m%d_%H%M%S.log'
FULLPATH = LOGSPATH
strconcat FULLPATH LOG_NAME
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

msg = hostname
strconcat msg ':22 /ssh /auth=password /user='
strconcat msg username
strconcat msg ' /passwd='
strconcat msg password

connect msg

;; Logging 
logopen FULLPATH 1 1

wait '$'

msg = ''
strconcat msg 'ssh '
strconcat msg username2
strconcat msg '@'
strconcat msg hostname2
sendln msg

wait 'password:'
sendln password2

wait '~]'

COMMAND = 'date'
sendln COMMAND
COMMAND = 'uname -a'
sendln COMMAND
COMMAND = 'whoami'
sendln COMMAND


end
```

以上
【React】コンポーネント内での直DOM操作はなぜいけないかを理解したい

## ダメなパターン
ReactでDOMを操作したいときに、`document.getElementById`や`document.querySelector`などを使うことは推奨されていません:no_good:

```tsx
export const Form = ()=> {
	const inputElement = document.getElementById('myInput')
	const handleClick = () => inputElement.focus()
	return (
		<>
			<input id="myInput" />
			<button onClick={handleClick}>Focus the input</button>
		</>
	)
}
```


## なぜダメか
仮想DOMによる差分更新が破綻してしまい、宣言的UIの思想に反するからです。

〜　完　〜

### そもそも…
#### 宣言的UIってなんだっけ？:thinking:
宣言的UIは、初めに目的のUIの形を宣言し、それに基づいて処理が実行されるというアプローチです。
命令的UIと比較するとわかりやすいです。

TODOアプリを例にして考えてみます:page_facing_up:
TODOを追加したらリストにチェックボックスと文言、削除ボタンが生成されます。
![スクリーンショット 2023-12-22 10.57.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/8ed815f7-2083-3a07-2e10-eca3aad4b7f4.png)


命令的UI（例：jQuery）では、生成されるDOMを順番に命令していきます。
命令的な書き方は順序通りに書くことができますが、最終的にどのようなDOMが生成されるかを想像することが難しいです。
一方、Reactなどの宣言的UIでは、最終的なDOMの形を先に宣言し、値や情報を渡すことでUIを構築します。
これにより、最終的なUIがどのようなものになるかをより明確に理解することができます。

宣言的UIの思想では、DOMを直接操作したり生成したりせずに、UIの形を宣言することが大切です！




#### 仮想DOMってなんだっけ？:thinking:
仮想DOMは、実際のDOMをレンダリングする前に、仮想のDOMの構造を計算することで、高速な表示を実現する手法です。

![スクリーンショット 2023-12-17 22.42.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/545547/0c16d6f7-d074-abbb-8410-ac92dd3549a3.png)


そして、この仮想DOMの生成はReactの視点から行われます。
Reactの外部で直接DOMを操作すると、仮想DOMの生成の対象外になり、変更が正しく検知されなくなってしまいます。

## つまり？
- 直接的なDOM操作を使用すると、Reactの仕組みをバイパスしてしまい、コンポーネントの状態とDOMが同期しなくなる可能性があること
- 宣言的にUIを構成することで、Reactのメリットである最終的なUIのイメージが明確になること

上記のような点から、Reactで直接DOM操作を行うことは推奨されません。

<!--
### `Form`コンポーネントが再レンダリングされたらどうなる？？

1. 取得したDOM要素の参照が古くなる: Reactのコンポーネントが再レンダリングされると、内部的に仮想DOMと実際のDOMが比較され、必要な箇所だけが更新されます。しかし、document.getElementByIdを使用して直接DOM要素を取得する場合、再レンダリングが行われても取得したDOM要素の参照は古いままです。そのため、UIが更新されても、取得したDOM要素に対して操作を行うことができなくなってしまいます。

2. パフォーマンスの問題: 直接的なDOM操作はReactの最適化機能をバイパスするため、パフォーマンスに悪影響を及ぼす可能性があります。コンポーネントが再レンダリングされるたびに、document.getElementByIdが実行されてDOM要素を探す必要があります。特にDOM要素の数が多い場合や複雑な操作を行う場合は、パフォーマンスの低下が顕著になる可能性があります。

#### 取得したDOM要素の参照が古くなるとは？

Reactは仮想DOMを使用して、コンポーネントの再レンダリング時に必要な箇所のみを効率的に更新します。再レンダリング時に新しい仮想DOMが作成され、前回の仮想DOMと比較されます。差分がある場合、Reactは必要な箇所だけを実際のDOMに反映させます。

ただし、直接document.getElementByIdを使用してDOM要素を取得した場合、ReactはそのDOM要素に関しては何も管理することができません。Reactが再レンダリングを行っても、getElementByIdで取得したDOM要素の参照は変わらず、前回の仮想DOMとの比較も行われません。

つまり、再レンダリングされた場合には、getElementByIdで取得したDOM要素の参照は古いままであり、更新されたUIに対して処理を行うことはできません。また、Reactの最適化機能も利用できず、パフォーマンスにも悪影響を及ぼす可能性があります。
-->

## どうすればいいか
ReactでDOMにアクセスする時は`useRef`を使います。
Reactが提供する手段によってDOM操作を行うことで、上記の懸念を解消できます。

```tsx
export const Form = ()=> {
	const inputRef = useRef(null)
	const handleClick = () => inputRef.current?.focus()
	return (
		<>
			<input ref={inputRef} />
			<button onClick={handleClick}>Focus the input</button>
		</>
	)
}
```

ただし、公式ドキュメントでも説明されているように、refは最終手段として使用するべきです。
可能な限りDOMを操作せずに問題を解決する方法を考えるようにしましょう。
<!-- そして破壊的な変更はこちらも再レンダリング時に破綻することがある点に気を付ける必要があります！ -->

https://ja.react.dev/learn/manipulating-the-dom-with-refs#best-practices-for-dom-manipulation-with-refs
Fractional Indexingによるデータ並び順の実装

## はじめに
この記事は一休.com Advent Calendar 2023 9日目の記事です。

アプリケーション開発において、ユーザーがデータを任意の順番に並び替えたいというユースケースが発生することがよくあります。

今回は、 Fractional Indexing　というアルゴリズムを使って、一つのレコードを更新するだけで順番を表現できる手法を紹介したいと思います。

## 一般的な手法
### 1. レコードにIntで順番を持たせる
素朴な方法を考えると、それぞれのデータに1〜連番を振っていき、順番を変更したら番号も振り直すという手法が取られることがあります。

以下のようにpositionで順番を表現します。
|ID|NAME|POSITION|
|---|---|---|
|1|A|1|
|2|B|3|
|3|C|2|

この実装にした場合、AとCの間に新しいレコードを追加しようとすると、 C = 3 と B = 4 というように複数のレコードに新しい順番を書き込む必要があります。

件数が多くなるほど、書き込み件数も増えていきます。

### 2. レコードに浮動小数点で順番を持たせる
1の方法では書き込みの回数がデータ量に応じて増加するというデメリットがあったため、それを解消する方法です。

レコード間にデータを追加する時は両隣のレコードのpositionの間の数値にします。

|ID|NAME|POSITION|
|---|---|---|
|1|A|1.5|
|2|B|1|
|3|C|2|

新しいレコードを B-A 間に追加すると、 position = 1.25 と計算できるので、対象レコードのみを書き込めばOKです。

1の方法と異なり、複数のレコードを更新する必要がなくなります。

## 文字列で表現する Fractional Indexing
前述の2の手法は、順番を分数で表現するということで Fractional Indexing と呼ばれます。

浮動小数点で実装する方法は非常にシンプルですが、並び替えを頻繁に行うと、だんだん少数の桁数が増えていき、浮動小数点で表現できなくなる恐れもあります。

このデメリットを解消しつつ、機能提供している [fractional-indexing](https://github.com/rocicorp/fractional-indexing) というライブラリがありました。

大きな違いとしては、
- 表現力の大きい62進数などの数値表現を使い、文字列としてindexを表現
- indexを辞書順にソートするだけで正しい順番を得られる
- 浮動小数点での表現に比べ、桁数が対数的に増えていくので精度が落ちることがない

となっています。

アルゴリズムの詳しい説明は、[こちら](https://observablehq.com/@dgreensp/implementing-fractional-indexing)の記事が参考になりましたので、興味があれば。


## 実際に使ってみる
javascriptでnpmライブラリ [fractional-indexing](https://www.npmjs.com/package/fractional-indexing) が実装されているので使ってみます。

```typescript
import { generateKeyBetween } from 'fractional-indexing'
/**
 * generateKeyBetween(a, b)
 * 二つのインデックスを与えることでその間にデータを挿入した場合のインデックスを返す関数
 */

const first = generateKeyBetween(null, null) // "a0"

// 末尾に挿入したい場合は、 generateKeyBetween（末尾のindex, null）
const second = generateKeyBetween(first, null) // "a1"

// 先頭に挿入したい場合は、 generateKeyBetween（null, 先頭のindex）
const zeroth = generateKeyBetween(null, first) // "Zz"

// 要素間に挿入したい場合
const between_first_and_second = generateKeyBetween(first, second) // "a0V"

const sorted = [first, second, zeroth, between_first_and_second].sort()

// 辞書順にソートする
console.log(sorted) // [zeroth, first, between_first_and_second, second]
```

## 所感
アルゴリズム自体の実装は複雑ですが、インターフェースが使いやすく、順番変更時に1レコードの更新だけで済むのが魅力的でした。

ただ、数値に比べて文字列のソートの方がコストが高いと思うので、そこをどう考えるかだと思います。

もしデータの順番をどのように表現するか悩んでいたら、検討してみてください。

## 参考記事
https://observablehq.com/@dgreensp/implementing-fractional-indexing
https://www.figma.com/ja/blog/realtime-editing-of-ordered-sequences/
GTMの変数、DOM要素でclass指定すると最初の要素しか処理してくれない

WordPressで「ネット」というタグが指定されている場合のみ発火させたいタグがあり、Google Tag Managerの変数、**DOM要素**を使って分岐させようとしました。

しかし、なぜか発火する場合としない場合があります。
確認すると、発火しないページでは最初のタグが「ネット」以外のものになっており、GTMではそれを評価していました。
## DOM要素変数では複数マッチした場合に最初の要素しか処理されない
これ、class指定できる意味あるの？思いましたが、もしかしたら元々ID指定しかできなかったのかもしれません。
`document.querySelectorAll()`じゃなくて`document.querySelector()`を使っているのかも。
## カスタムJavascriptで対応
WordPressのテーマに手を入れないでGTMだけで解決するならこんな感じ
```javascript
document.querySelectorAll('.single-EntryMeta_Link').forEach((el)=>{
    if(el.innerHTML == 'ネット'){
        return true;
    }
});
return false;
```
## タグの属性を追加して対応
もうひとつのやり方が、タグの属性で指定する方法です。
```html
<span class="single-EntryMeta_Link">おすすめ</span>
<span class="single-EntryMeta_Link">ネット</span>
```
の様なマークアップでWordPressのタグが出力されている場合、
```html
<span class="single-EntryMeta_Link" data-tag="おすすめ">おすすめ</span>
<span class="single-EntryMeta_Link" data-tag="ネット">ネット</span>
```
みたいにすれば、CSSセレクタで要素の値指定で取得できます。

![スクリーンショット 2023-12-08 15.07.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5743/de95f44a-097a-0383-38de-677e18ee7535.png)
PHP8技術者認定初級試験を受けてみた

この記事は[ミライトデザイン Advent Calendar 2023](https://qiita.com/advent-calendar/2023/miraito-inc)の８日目の記事です。

前日の記事は[bucchi](https://zenn.dev/t_kitamura)さんの[「これからChatGPT（AI）と共存するために知っておくべきこと 生成AIのサービスを知る」](https://zenn.dev/t_kitamura/articles/289446c05c5469)でした。

# はじめに
先日[「PHP8技術者認定初級試験」](https://www.phpexam.jp/summary/novice8)を受けてきました。

社内で資格取得を奨励する制度が導入され、日常の業務で使用している「PHP」に関連する資格試験があることを知り、
- 自身の「PHP」に関する知識はどの程度なんだろう
- 勉強することで業務に繋がるよね

と考え受験を決めました。

その内容をこの記事で共有していきたいと思います。

# 試験概要
- 概要：PHPプログラミングの基本知識を問う試験
- 受験料金：12,000円（税抜）
- 試験時間：60分
- 設問数：40問
- 試験時間：1時間
- 試験方法：CBTによる選択式（複数または単一選択）
- 合格ライン ：7割正解で合格

PHP資格の入門レベルです。
ちなみに[「PHP8上級/準上級試験」](https://www.phpexam.jp/summary/expert8)という上のレベルもあるようです。
（次受けようかな）

試験の出範囲は[オデッセイコミュニケーションズ](https://cbt.odyssey-com.co.jp/phpexam/php8_2.html)で確認できます
| 章 | 項目 |  出題割合 |
|:-----------:|:------------|:------------:|
| 第1章       | イントロダクション        | 2.5％         |
| 第2章     | PHPの基本      | 12.5％       |
| 第3章       | 演算子        | 10.0％         |
| 第4章         | 制御構文          | 13.8％           |
| 第5章       | 組み込み関数       | 8.8％       |
| 第6章    | ユーザー定義関数     | 7.5％      |
| 第7章    | 標準クラスライブラリ     | 7.5％      |
| 第8章    | リクエスト情報     | 10.0％      |
| 第9章    | データベース連携     | 5.0％      |
| 第10章    | オブジェクト指向構文     | 17.5％      |
| 第11章    | 高度なプログラミング     | 5.0％      |

[「独習PHP 第４版」](https://www.shoeisha.co.jp/book/detail/9784798168494) テキストが認定テキストとなっており満遍なく出題されます。
約600ページあるので細かい部分までしっかり読むのは大変。
# 学習期間
約２週間。
平日の通勤電車と土日メインでした。
（試験直前の平日は業務がうまく進んでおらず学習時間確保できずでした...）

# 学習方法
資格試験勉強法としてよくある以下の流れで行いました。
1. [模擬問題](https://study.prime-strategy.co.jp/study/ph8el1/)を解き、出題形式と現状の自分のレベルを把握する
1. 1,の問題で間違った箇所、理解があやふやな箇所を[PHPマニュアル](https://www.php.net/manual/ja/index.php)を調べたりしてなくす
1. [独習PHP 第4版](https://www.shoeisha.co.jp/book/detail/9784798168494)をざっと読み練習問題を解く

私の場合実務で「PHP」を扱っており基本的な知識はあったため、
テキストの隅から隅まで見るといったことはしませんでした。
（時間もなかった）

にも関わらず初めて模擬問題を解いた際には6.5割の正解で思ったよりも点数が取れておらず大丈夫かなと不安になりました。。。
普段業務で触らない箇所の点数が低かったです。

# 学習をしてみて感じたこと
意外と知らないこと、聞いたことはあるけど覚えてないことがあるなという印象でした。

内容の一例を出すと、
- 文字列の比較ってどう考えるんだっけ？`"543a" < 56`,`"php" > "perl"`
- [setcookie関数](https://www.php.net/manual/ja/function.setcookie.php)は第7引数まであるみたいだけど第6てなんだっけ
- [配列のソート系の関数](https://www.php.net/manual/ja/array.sorting.php)で昇順なのはどの関数だっけ、キーと値の関係維持する関数どれだっけ
- [fopen()関数](https://www.php.net/manual/ja/function.fopen.php)のファイルモードって「rb,wb+」とか色々あるけどどれが上書きするんだっけ

などなど。

実務では調べることができるので⚫️⚫️を行うためにはこういう関数があるよね、
くらい覚えておけば良いと思うのですが、試験では詳細まで覚える必要があります。
逆にこれは実務ではあんまりやらないよなぁ、といった処理があったりもしました。

使ったことない関数などは、実際にコードを書いて動かすことで理解が深まりました。
試験では選択形式で実際にプログラムを書くことはありませんでしたが、
やっぱり手を動かすことが大事だなと感じました。

# 試験結果
1000点 満点中800点で合格することができました。
（合格基準：700点）
900点くらい取れるかなと考えていましたが、予想していなかった箇所から問題が出題され少し焦る場面もありました。

単一選択の場合、残り2つまでは絞れるもののどっちだっけ？となることが多かったです。

試験を受けるのは数年ぶりで、その緊張からか試験中気分が悪くなりました（笑）

# 感想
実務で「PHP」を扱っているとはいえ、
日常業務で触れる機会のない側面に触れることができ有意義でした。

また、PHP7からPHP8へのアップグレードに伴う変更点を改めて学習することができ、自身の理解を深めることができよかったと感じています。

今後も資格取得に取り組み業務に活かしていきたいです。



明日の記事は [FrozenVoice](https://qiita.com/FrozenVoice) さんの[「2023年に導入して満足度が高かったアイテム12選」](https://qiita.com/FrozenVoice/items/5ef600e3f4be743f542b)です。
どんなガジェットが紹介されるのか楽しみです。
新卒でエンジニアとして入社した感想

この記事は [クラウドワークス Advent Calendar 2023](https://qiita.com/advent-calendar/2023/crowdworks) シリーズ1の13日目の記事です。

クラウドソーシングサービス「[クラウドワークス](https://crowdworks.jp/)」（以下 crowdworks.jp ）にてエンジニアをしておりますhattorishotaです。

2023年4月に新卒で入社しまして、現在は技術的負債解消チームにて crowdworks.jp のフロントエンドにおける負債解消を主に行なっております。

入社して早いことに8ヶ月が経過しました。あっという間の8ヶ月でしたが、この中で感じたことや学んだことなどを書いていければと思います。

# 入社して感じたこと

4月に入社するまでは内定者インターンとして業務に入っていましたが、正式に社員として入社するまで見えてこない景色もありました。

### 技術力の高い人がたくさん
普段の開発業務の中で不明点が出た際には先輩方に気兼ねなく質問させていただいていますが、みなさんすぐに親切に答えてくださります。また一つの解決策だけではなく、いろいろな視点から解決策などを提案してくださるのでそれが自分の知識にもなりますし本当にありがたいです。
解決策を一つ出せるのも大事ですが、いくつかの解決策のパターンを出せることもより大事だと思うので、視野を広げて技術力を高めていきたいと思いました。

それ以外にも、先輩方が作られたPRなどを見ることでどういった意図で実装されたのか後から見返して参考にすることもできますし、自分も将来を見据えてわかりやすいPRを作成するための手引きにさせていただいてます。

### 労働環境がとてもよい
弊社はフルリモートフルフレックス制度が採用されており、パフォーマンスを最も発揮できる状態で仕事をすることができます。自分の仕事がしやすい時間帯で仕事ができるのはもちろんのこと、家庭の事情などで勤務時間をずらしたいといった要望も叶えることができます。
そのため、朝早くに起きて満員電車に乗る必要がなかったり、通院などで混雑する時間を避けることができるという非常にありがたい制度だと思ってます。

また弊社には書籍購入制度(業務関連および自己啓発にかかる書籍購入をサポートし、従業員のスキルアップを促す制度)が存在します。この制度を利用して購入した書籍はオフィスに置いておかなければならない、などといった制約もないため完全に自分の持ち物にできます。おかげで気になった書籍をいつでも購入することができますし、いつでも見返すことができます。
技術書は1冊あたり3~4000円以上するものがほとんどなので、スキル向上のための書籍を会社に負担していただけるのは新卒の自分にとっても嬉しい制度だと感じました。

### 意外と他社のエンジニアの方と交流する機会がある
エンジニアといえば基本社内でコミュニケーションが完結するため、社外の人との関わりはほとんどないものだと思っていました。しかし、エンジニアの勉強会が日々どこかで行われていることを知り、今年は[RubyKaigi](https://rubykaigi.org/2023/)や[Vue Fes Japan](https://vuefes.jp/2023/)、その他勉強会に参加することで様々な会社のエンジニアの方と交流することができました。
まだ社内の開発についてよく理解していかなければいけない段階ではありますが、他社の開発状況などを知ることで自社に活かせることもあると思うので、今後も積極的に交流していきたいと思っています。

# この1年で学んだこと

技術について学んだのは当然のことですが、学び方や普段の開発のスタイルで変化がありました。

### 一次情報を見ることの大切さ
これまで自分は、一次情報が重要であることをわかっていながらも疎かにしていて、エラー名やライブラリなどで検索をかけて出てきたブログ記事などを参考にすることがほとんどでした。しかしそういった記事では説明が物足りなかったり解決策しか書かれておらずで根本的な解決にならないこともありました。
一次情報は「表現が難しい」「読みにくい」と感じたりして避けることがあったのですが、しっかり読むと意外とすんなり読めるということを知り、かつ正しく問題が解決できたこともあり、本質の情報を読むことの重要性を改めて感じました。

### モブプロのありがたみ
モブプロとは、複数人でコミュニケーションを取りながら開発を行うことを指します。1:1であればペアプロと呼んだりするそうです。
入社するまでは基本的に誰かとプログラミングをするといった経験がありませんでした。そのため、他の人が同じ実装をするときにどのような思考を辿ってコードを書いていくのか知る機会がなかったのです。
入社して初めて先輩社員にモブプロを行なっていただいたのですが、みなさんの開発をする上での考え方を直接聞くことができてとても勉強になりました。はじめは話を理解するのに精一杯ではあったのですが、徐々に内容も理解できて成長を実感しました。

# これからやっていきたいこと
8ヶ月前入社したときに一番感じたのは、「想像以上にレガシーなものが多いんだ」ということでした。Railsのテンプレートエンジンであるerbを使用して表示しているものがまだまだ多かったり、jQueryで実装している箇所がまだ残ってしまっていたりと、サービスの規模が大きいだけにやることがたくさんある印象を今も持っています。
技術的負債をゼロにするということは難しいかもしれませんが、今後の開発における負担の軽減、開発速度の向上を目指すべく、今後の自分たち、また入社されてくる人のためにも少しでも技術的負債の解消ができればと思います。

またサービスの開発者として、ユーザーに対する施策も考えていきたいと思っています。ユーザーにより長く使っていただけるサービスを作るために、技術だけでなく事業への理解も深めて事業成長への一端を担っていきたいです。

# おわりに
新卒で入社してこれまでに感じたことや学んだことなどをまとめました。入社後すぐから実際に開発メンバーの一員として受け入れていただいてきましたが、各ツールの使い方や初歩的な開発の知識など一から先輩社員が丁寧に教えてくださったおかげで、今も少しずつできることが増えてきていると感じています。
後輩社員が入ってくる時期も徐々に近づいています。自分も学んできたことを伝えられるよう引き続き頑張っていきます！
gcovrのサンプル

# Gcovrのサンプル

sample.cppのカバレッジをどのように測定しているかわかるかもしれないサンプル





```
#include<stdio.h>
#include<stdlib.h>

int main(int argc, char * argv[]) {
    int i1 = atoi(argv[1]);
    int i2 = atoi(argv[1]);
#if 0
    printf("i1 = %d, i2 = %d\n", i1, i2);
    if(i1 == 1 && i2 == 1){
        printf("argv[1] = 1, argv[2] = 1\n");
    } else {
        printf("argv[1] != 1\n");
    }
#endif

    printf("i1 = %d\n", i1);
    if(i1 == 1){
        printf("argv[1] = 1\n");
    } else {
        printf("argv[1] != 1\n");
    }

    for(int j = i1; j < 3; j++)
    {
        if(j == 2){
            printf("j = 2\n");
        } else {
            printf("j != 2\n");
        }
        printf("j=%d\n", j);
       
    }

    return 0;
}


```




## install gcovr

This is an example.

`pip install gcovr`

## Build sample.cpp

`g++ sample.cpp -o sample -fprofile-arcs -ftest-coverage -fPIC`

## Clean gcov files

```
rm sample.gcda
rm sample.gcno
```

## Execute sample

This is an example. Please change parameter and execute several times.

`./sample 100`

## Create gcov report

`gcovr -v -b --html-details repo/ -r .`

## Watch gcov report

Please see 'repo/coverage_details.functions.html'.


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600486/8aacb9f4-45a5-5832-8b99-e1e21c082376.png)

- if (i1 == 1) では2分岐
- if ((i1 == 1) && (i2 == 1)) では4分岐

となる
gcovrでは単純に条件文の数 x 2 が分岐数の総数になっているように思える。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/600486/fa5e98b8-eee9-eaff-7d67-68c8ec1a8f50.png)
OpenVPNで突然接続できなくなったらdaemonを疑う

ある日突然OpenVPNがVPNに接続してくれなくなったので、
Mac標準のVPN設定で誤魔化していた。
が、それも繋がらなくなって3日くらいハマったのでメモ。

## 何が起きたのか

`"Error calling protect() method on socket: 30 times"`　が出て接続不可。
何回トライしても同様のエラー。

## とりあえず結論

> https://forums.openvpn.net/viewtopic.php?t=35547
> Sounds like the openVPN connect launch daemon is not working.

openVPN connect launch daemon が動いてないんじゃない？

ということだったので、上記ページのリプに従って

`sudo launchctl list | grep org.openvpn.client` 

したところ、リプに指摘があるように *何も出力されなかった* のでビンゴ。

`sudo launchctl load /Library/LaunchDaemons/org.openvpn.client.plist`

してめでたく接続。

### 接続するまでに試して無駄だったこと

- OpenVPN の再インストール＆接続情報の再設定
    - 一度繋がるケースもあったけどセッション切れた後は同じエラー
- ネットワーク&VPNの設定削除、再起動
    - 何も変わらなかった
- 色々やる間に OpenVPN connect launch daemon に対して `sudo launchctl unload` をした気もする
    - 権限なくて実行できませんだったはずなんだけどな

というところでした。
同様のエラーでしんどい思いをしてる方の参考になりますように。
【React】useCallbackとuseMemo使ってみた

# useCallbackとuseMemo の使い方
Reactアプリケーションを開発する際、パフォーマンスの最適化は非常に重要です。React Hooksには、`useCallback`と`useMemo`という2つのフックがあります。これらは関数や計算結果をメモ化し、再レンダリングの度に新しい関数や値を生成せずに済むようにします。この記事では、`useCallback`と`useMemo`の基本的な使い方に焦点を当てます。

## useCallbackの使い方

`useCallback`フックは、指定されたコールバック関数をメモ化します。これにより、コンポーネントが再レンダリングされるたびに新しい関数が生成されるのを防ぎます。これは特に、子コンポーネントにコールバック関数をプロパティとして渡す場合に有用です。

```tsx:MyComponent.tsx
import React, { useCallback } from "react";

const MyComponent: React.FC = () => {
  const handleClick = useCallback(() => {
    console.log("Button Clicked!");
  }, []);

  return <button onClick={handleClick}>Click me</button>;
};

export default MyComponent
```

上記の例では、`handleClick`関数は再レンダリングごとに同じものが使用されます。依存配列が空であるため、再レンダリングのたびに新しい関数を生成する必要はありません。

## useMemoの使い方
`useMemo`フックは、指定された関数の計算結果をメモ化します。これにより、再レンダリングのたびに同じ計算を再実行するのを防ぎます。これは、コンポーネント内で重い計算を行う場合に役立ちます。

```tsx:MyComponent.tsx
import React, { useMemo } from 'react';

const MyComponent: React.FC = () => {
  const expensiveCalculation = useMemo(() => {
    // 重い計算
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return result;
  }, []); // 依存配列が空なので、再レンダリングごとに同じ計算結果が使用される

  return (
    <div>{expensiveCalculation}</div>
  );
};

export default MyComponent
```

上記の例では、`expensiveCalculation`は再レンダリングごとに同じ計算結果が使用されます。依存配列が空であるため、再レンダリングのたびに計算を再実行する必要はありません。

## まとめ

`useCallback`と`useMemo`は、Reactアプリケーションのパフォーマンスを向上させるための重要なツールです。コールバック関数や計算結果をメモ化することで、不要な再計算や再生成を防ぎ、コンポーネントの効率を向上させることができます。これらのフックを適切に使用することで、より快適で効率的なReactアプリケーションを構築することができます。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！
Git submoduleと仲良くなれる記事。

# はじめに

私の所属するチームではGit submoduleで管理されたプロジェクトがあります。
前職でもSubmoduleを用いていたのですが苦手意識があったのでここに備忘録を残しておきたいと思います。



## サブモジュールのプロジェクト

### Github上でのサブモジュール
下記のようにリポジトリのコミット値が指定されています。
例えば、submoduleAのコミットハッシュ`c8d94f3`時点を認識しています。

![Submodule1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982130/a1f6631a-2132-d957-b67f-728a7f61bb1c.png)


### CLI上でSubmodule使われているか確認
`$ git submodule status` で、サブモジュールが利用されているか確認することができます。
```
hogemaru ~/Code/my_actions (main)
$ git submodule status
 f0e5d588c01bbc1acc4b366c02ffac9dcb3da4fb submoduleA (heads/main)
 ccda52d8801d2d15d2d1c0cf4ee0294e2d396365 submoduleB (heads/main)
```

## 親プロジェクトと子プロジェクトの最新コミットを確認する

実はsubmoduleAの最新の状態を持ってきたい場合に`$ git submodule update`をしても最新のsubmoduleAは取得できません。



## リモートリポジトリの main 追従
--remote を付けると、子の最新のコミットを取ってくることができます
`$ git submodule update --remote`

親が認識している　submoduleA　`f0e5d` から　`c8d94f3` へ更新されているのが確認できます。

```
hogemaru ~/Code/my_actions (main)
$ git submodule update --remote
Submodule path 'submoduleA': checked out 'c8d94f3b56fbc6b7c15b8aa93b831e753725fc0e'
```



ここで注意しておきたいのは、親では子のコミットを`c8d94f3`を認識させるには親側できちんと変更をコミットすることです。

コミットして反映させましょう！　下記の画像から親が子の最新のコミットを認識している状態にできました！

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2982130/d9a73c5b-40d0-81a8-8bae-699c2b87473a.png)




## まとめ
Submoduleが使われている時は下記のことを意識する💡
- 親（ルートリポジトリ）が認識している子（Submodule）のコミットを確認する
- 子の最新のコミットは親が認識している子のコミットとズレているのか確認する
- `$ git submodule update` は、親側が認識している時点の子コミットに更新することを意識する


それでは、よいサブモジュールライフを！
普段コンタクトレンズをつけて開発作業してるエンジニアへ(※特に30代以降)

# はじめに
どうも。サラリーマンで会社のスポーツクラブに所属しながらエンジニアをやっているものです

みなさま、視力は良いですか？

私はかなり悪いです

裸眼だと両目で視力で0.1ないです

メガネやコンタクトレンズを付けずに外出は不可能です

　
 
なので普段はコンタクトレンズを装着して生活しています！

エンジニアでコンタクトレンズつけている人なんて今どき普通ですよね

　
 
　

コンタクトレンズをつけた状態で、片目視力で1.5ずつ

両眼視力だともっとあると思います

視界が鮮明に見えて最高ですね！

　
 
え・・・？

だって鮮明に見えたほうがいいじゃないですか！

コンタクトレンズの度の強さも、眼科やアイ◯ティさんでちゃんと測って作ってもらったから安心ですよね😊

　

　
 　

ところが、これが知られざる悲劇の序章だったのです・・・

つづく


 
# 第２章 異変

さーて、今日も開発作業やるぞー

今週の目標に対して、今日はここまでを目標においてまずはこの部分を着手しよう...

（数時間後...）

ふー、結構進んだなー

目が疲れたー

　
 
・・・
　

（翌日）

今日もコンタクトレンズつけて開発してるけど、

なんだかうまく焦点が合わない感じがする・・・

特に近距離の手元やPCモニターに焦点が合うのに異常に時間が掛かる・・・

　

・・・

　

その違和感はずっと継続していた

PCモニターばっかり見ているから眼が疲れているんだろう

と思い、ゆっくり休んで翌日には回復していたりするので特に気に留めていなかった

　

# 第３章 原因

普段の生活でも手元が見にくいなぁと思うことが増えてきた

（『焦点が合いにくい』みたいな症状ってあまり聞かないよなぁ。ネットでも似たような症状は出てこないし。）

ネットで調べても、コンタクトレンズやスポーツビジョンの研究領域での見えの改善方法に関する情報は少なかった

　

さらに調べていくと、「PC用のメガネ」を作ったという記事を見かけ、

あー、たしかに少し度数を弱めたメガネを作ってPC作業用に使い分ける

みたいな話聞いたことあったなぁ・・・

https://www.watch.impress.co.jp/docs/series/itsmo/1294517.html

いや、メガネ2本作って使い分けるとかめんどいしｗｗ

と思って以前は気にも留めてなかった

　

しかし、

どうやら

「度数の強いメガネ/コンタクトレンズ」を使っていると

遠い距離がハッキリ見えるように調整されているため

逆に近い距離に合わせるには眼の筋力を多く必要とすることがある

らしい・・・

　
　
・・・

　
 
・・・・・・？🤔

　
 
### もしかして、度数の強いコンタクトレンズを装着して1日中PCモニターを見て作業してるのって眼の筋力をかなり酷使してる・・・？🤔

　

コンタクトレンズの度数は、基本的に『5m先の物体がどの程度ハッキリ見えるか』という指標で調整されて作成される

眼科で必ず「普段、車の運転はされますか？」と聞かれる

Yes(もしくは、たまに運転します)と答えると、まず間違いなく5m視力で1.0以上出るように調整される

　

一方、普段エンジニアとしてPCモニターを見て作業しているときは、基本的に1m以内に焦点を合わせている

　
　

つまり、遠方5mの視力がしっかり出るように調整されたコンタクトレンズを使って近距離のPCモニターを見て作業することはかなりの眼の筋力を必要とする作業を延々と行っていたのである

　

 な、なんだってー！！！

　　

そして、近距離の本やPCモニターが見えにくくなるという症状は『老眼』という症状に似ている・・・

　　

もちろん、10代～20代の若いころは眼の筋力がしっかりしているため

無茶な眼の酷使をしてもすぐ復活！

ぜんぜんへっちゃら！

　

しかし、エンジニア歴が長くなるにつれ酷使してきた眼に疲労が蓄積・・・

　

両眼視力1.5以上で調整されたコンタクトレンズを平日週5日勤務時間中ずっと装着して眼を酷使し続けた（さらに帰ってからや土日も家でPC）

　

その結果、近距離の焦点が合いづらくなって普段の開発作業やスポーツに支障をきたすようになった・・・！！




# 第４章 解決方法の模索

推定ではあるが、原因と思われる箇所を見つけたら解決方法を模索してみたくなるのがエンジニアのさが・・・

　

全国各地のメガネ屋さんには、「眼鏡作製技能士」という資格を持った方がいらっしゃり

そういった方に相談するといい という記事をみかけた

　

あとは、眼科の先生に相談するといいという記事もみかけた

　
 
 ・・・

　

どうやって相談しようか悩む・・・

「PC作業やスポーツしているときに近い距離が見にくいんです」

とか・・・？



 ### そんなふざけた相談しにくるな と言われたらどうしよう😇

　

  と思いつつも、ダメもとで思い切って眼科の先生に相談してみることにした


　

すると、かなり親身に相談に乗ってくれました


　

よくある方法としては、度が強めのコンタクトを付けているが

PC作業を行う際に「度がプラスのメガネ（いわゆる老眼鏡）」を付ける

という方法

+1.0とか、+1.5 とか

そういうのをつけると、少し矯正度合いが緩和されて近い距離が見やすくなるらしい

ふむふむ・・・

　

しかし、私はスポーツもするのでメガネで解決はしたくない

　

 ということで
 ### 『度数を少し下げたコンタクトレンズ』を作ってみた！！

　

 もともとが、右-7.0/左-6.0

だったが、

右-6.5/左-5.45

に下げてもらった

　

すると、


 
### 手元がよく見える・・・！！！！！！！！

　

これは衝撃の体験でした

　

 よく見える・・・！

 焦点が合う・・・！


 その後、スポーツを何度かやっているとまだ手元が見えにくいことに気づく

　
　
 ということで、再び眼科に相談しにいき限界まで落としてもらうことに

 生活に支障の無い片目視力0.8程度、両眼で1.0くらいは出てる矯正具合

 右-6.0/左-5.00 まで落としてもらった

　

  すると・・・

  
### さらに手元が良く見える・・・！

　

コンタクトレンズの度数が強すぎたので少し下げたところかなり改善されました

　
# 第５章 解決と今後の対策
普段、コンタクトレンズを装着して長時間PC作業を行っていたことで眼の筋力を酷使しすぎた

その結果、コンタクトレンズを装着してPCモニターを見る際に焦点があいづらくなったり手元が見えづらくなったり生活に支障をきたした

その解決方法として、コンタクトの度数を落としてみました

すると、近距離の見えが改善されました

　


ただし、

・コンタクトの度数を下げると車の運転に支障をきたす恐れがあるのでそこはしっかり見えるレンズを付けた状態で行うこと

・度数を下げたとしてもPCモニターを長時間見ていると眼が疲れるので眼を休める時間はちゃんと取る

・できればコンタクトを付けた状態での長時間のPC作業は避け、近距離用のメガネを利用する

という対策を併用すること

　


世の中のコンタクト愛用エンジニアの眼のケアの一助になれば幸いです！
闘魂Raspberry Pi ── `raspi-config`で<Yes>、<No>ボタンがないときはターミナルのウィンドウを縦方向に広げてみてください。きっとそこにいます。サマルトリアの王子さんです。

# はじめに

Raspberry Pi OSを使う機会がありました。
I2Cを有効にしたいのです。

`raspi-config`で上下、左右キーを使って操作するアレです。
で、困ったことがありました。いつもと感じが違うぞ、と。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/a580f85f-0802-4d36-1571-7ec1477ab769.png)

そうそう、うんうん「enable」にしたいのさ、でもどうやってこの画面でenableに変更するの！？

新し目のRaspberry Pi OS（Linux raspberrypi 6.1.0-rpi7-rpi-v8 #1 SMP PREEMPT Debian 1:6.1.63-1+rpt1 (2023-11-24) aarch64 GNU/Linux）をインストールしたせいで、なにか変わったのだけど、まだ情報が出回っていないのかなあ、とかあらぬ方向に想像を膨らませたり、どうやってググったらいいんだと右往左往していました。そのへんをほっつき歩いて文字通り右往左往していました。

Raspberry Pi OSにはSSH接続でUbuntu(WSL 2)からアクセスしています。

# 結論

ターミナルのウィンドウを縦方向に大きく、目一杯広げてください。
いるじゃない！　そこに！　

ドラクエ２のサマルトリアの王子をおもいだしました。
`<Yes>`、`<No>`ボタンにこう言われた気がしました。 **「いやー さがしましたよ」**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/d3239804-de00-0d7b-e87d-424c77e9dc1c.png)


# さいごに

`raspi-config`で `<Yes>` 、 `<No>` ボタンがないときはターミナルのウィンドウを縦方向に広げてみてください。きっとそこにいます。サマルトリアの王子さんです。
このあと[Elixir](https://elixir-lang.org/)をインストールしてAHT20で温度・湿度を測る（予定、あくまで予定です）ので[Elixir](https://elixir-lang.org/)の記事にさせてください。

Raspberry PiってことでもうそれIoTと言って過言ではないですよね！、ということで「(ElixirかIoTくらいは絡んでいればおけ」の精神に照らすと、両方絡んでいるので堂々と[#NervesJP Advent Calendar 2023](https://qiita.com/advent-calendar/2023/nervesjp)の末席を汚します。

---

私は自分自身と闘いました。
「闘魂とは己に打ち克つこと。そして闘いを通じて己の魂を磨いていくことだと思います」とアントニオ猪木さんは引退試合後のセレモニーで述べられました。
猪木さんの言葉をそのまま胸に刻み込んでいます。
知っているだけで終わらせることなく、実行する、断行する、一歩を踏み出すことを自らの行動で示していきたいとおもいます。
**アントニオ猪木さんのメッセージから元氣をもらったものとして、それを次代に語り継ぎ、自分自身が「闘魂」を体現するものでありたいとおもいます。**

---

<b><font color="red">$\huge{元氣ですかーーーーッ！！！}$</font></b>
<b><font color="red">$\huge{元氣があればなんでもできる！}$</font></b>
<b><font color="red">$\huge{１、２、３ ぁっダァー！}$</font></b>
人事＆Webディレクターを兼任！異なる職種でも意外な相乗効果が・・・！


こんにちは！オークファンで人事とWebディレクターをしている@yui_aucfanです。
今回は初めてこのアドベントカレンダーに参加させていただけることになったので、
簡単な自己紹介やこれまで2つの業務を兼任して感じたことなどを書いていきます！

# ■ プロフィール 
新卒1年目でSIerに就職し、SESの案件獲得営業をしていました。
働く中で自分からもっと裁量権を持って新しい提案やアイデア出しをしていけるような
仕事がしたいと感じ、今年4月に未経験人事として入社、今は新卒と中途採用担当をしています！

そして今年10月からは自社サービス「NETSEA」のWebディレクターも担当させていただいてます！
経緯は次の項目で詳しくお話しします👀


# ■ 人事とWebディレクターを兼任することになった経緯
元々中途でWebディレクターポジションの採用を行っており、採用に苦戦していた時何気なく
「楽しそうなので自分がやりたいくらいです」とつぶやいたところ
「じゃあやってみる？」と担当部署のMGRに言っていただけたことがきっかけです！

そこからはとんとん拍子で話が進み、3週間後くらいには兼任が決まりました(笑)
まさか本当に実現すると思っていなかったので、そのスピード感にも驚きましたが
実際採用に携わる中でも魅力的な仕事だと思っていたためすごく嬉しかったです！


# ■ Webディレクションを担当して感じたこと 
Webディレクターの業務を開始して2カ月が経ちましたが、一番難しいと感じるのは
物事を正確に伝えることです。
ディレクターはサービスに関してユーザーと会社の架け橋となる仕事なので、
施策やこちらの意図を正確にエンジニアやデザイナーに伝達する必要があります。

自分では理解できても相手目線だと全く分からない！ということもあるので、
仕様書を作成したり普段コミュニケーションを取る際は客観的に齟齬のない伝え方が
出来ているかを意識するようになりました。
(まだまだ未熟ですが。。)

あとは小さな改修でも、実際に自分が携わった企画がサイトに反映されてるのを見ると
自分もNETSEAというサービスを作り上げているという実感が湧いてやりがいを感じました💪
何より、毎日新しいことばかりで学べることが沢山あるのでそういったところも面白いですね！


# ■人事とWebディレクター、全く違う職種でも・・・ 
初めは全く違う職種なので、仕事のやり方や視点も全く違うのでは？と思っていましたが
それぞれ違う視点があるからこそ互いに活かせる部分がたくさんありました。
特に新卒向けの会社説明会や面談では、実際にサービスを運営する事業部側の目線をもって
より納得感のある魅力の伝え方ができるようになったと感じています。

あとは以前より交流の幅が広がって、NETSEAを運営しているメンバーと食事に行ったり
オフィスで話しかけてもらえるようになったのがすごく嬉しいです。

初めは全く知識や経験が無い領域だったので不安もありましたが、チームの上長やエンジニア、
デザイナーの方々に日々フォローしていただいているおかげで少しずつ業務にも慣れてきました！

# ■ 最後に
まだまだ未熟な部分ばかりですが、これからもっとサービスについて理解を深め
一人前のWebディレクターになれるよう精進します！

最後に人事としてもPRしますが、オークファンでは絶賛エンジニア募集中ですので
興味を持っていただけた方はぜひご応募ください！！✨

最後までお読みいただきありがとうございました！
【Flutter】データの永続化

[chatGPT に立ててもらったスケジュール](ceecf4a987d3f75b6d93)に準じてFlutterの状態管理を勉強。
> Day 9: データの永続化
>   - ローカルデータベースとの連携方法を学ぶ
<!-- >   - データの永続化と復元を実装する -->

# ローカルデータベースとの連携方法
パッケージを使うことでローカルにデータを保存できる。
- SQLite
  - SQLを使って操作できる
- SharedPreferences
  - アプリ固有のキーと値のペアを保存できる
  - データ数が少ないときならOK
- flutter_secure_storage
  - 暗号化したデータを保存できるのでパスワードなどデータを安全に保存したいときに良い
# データベースの例
現在下記サイト参考に勉強中
まだ理解しきれてない・・・

https://yakiimosan.com/flutter-sqlite-basic/

<!-- # データの永続化と復元を実装する
## SQLiteを使えるようにする
SQLiteを使用するために、sqflite パッケージを使う。
以下をターミナルで実行。
```
$ flutter pub add sqflite
```
## sqfliteをインポート
```dart 
import 'package:sqflite/sqflite.dart';
``` -->
# 参考

https://www.flutter-study.dev/recipe/local-data

https://yakiimosan.com/flutter-sqlite-basic/

https://kehalife.com/flutter-sqflite/
VARとは？

# はじめに
　こんにちは！
　サッカーするのも見るのも大好きなサッカー少年です！
　この記事では、最近サッカーなどでよく聞く「VAR」について解説していきたいと思います。

　　　　　　　　　　　　　　　![soccer_boy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636363/b1c9318e-a13b-8b60-e4a9-50f6bc5a46fc.png)
# VARとは？
　「VAR」という言葉。
皆さんも聞いたことはあるのではないでしょうか。
「VAR」とはビデオアシスタントレフェリーの略称です。
サッカーで使われる審判のアシスタント技術であり、初めてこのシステムが導入されたのは、２０１６年のFIFAクラブワールドカップという大会から導入されました。そして、２０１８年のロシアワールドカップでも導入され、世界中で知られることになりました。

# なんのためにつかうのか？
　一言で表すとVARというのは主審のアシスタントという役割です。詳しく解説すると、次の４つの事象と主審が確認できなかった重大な事象のみに介入します。４つの事象とは、「得点かどうか」「PKかどうか」「退場かどうか」「警告退場の人間違い」の４つの場面です。

　　　　　　　　　　　　![mitoma.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3636363/08d05764-86fe-00fd-b2f3-eac2894c72f8.png)

# なにができるのか？
　他のスポーツいうとテニスやバレーボールの「チャレンジ」のようなものです。簡単に言うと、ビデオ判定で、モニターが設置された別部屋からフィールドにいる主審・副審をサポートすることができます。先ほど紹介した場面であいまいな判定や点数にかかわる判定などの重要な場面に、主審がリプレイ映像を見ながら別室にいるほかの審判員と相談しながら間違いのないように判定します。

# どんな技術が使われているのか
　２０２２年のワールドカップで導入された「半自動オフサイド判定」と「最新のトラッキング技術」について説明します。「半自動オフサイド判定」とは、「スケルトラック」と「ホークビジョン」という技術が使われていて、「スケルトラック」は、会場に設置された12台のトラッキング専用カメラから得られた映像をAIが分析し、骨格や関節の位置から選手の現在地を詳細に算出するトラッキング技術です。この「スケルトラック」に、位置情報データをもとにした選手の位置関係を3Dで可視化できるホークビジョンを組み合わせることで、半自動オフサイド判定が可能になります。
 
# まとめ
　少しは「VAR」について分かっていただけたでしょうか。
　正確な判定をすることができる「VAR」ですが、判定までに時間がかかりすぎている、プレーの流れが切れてしまう。などの批判的な意見も少なくありません。時が経つのと同時にIT技術が進化する現代では、年々改良を重ねて、より良い方向に向かっていると思います。ちなみに私は、「VAR」は賛成派です。

　最後まで読んでいただきありがとうございました！
Amazon InspectorとMicrosoft Defender for Cloudの比較⑤まとめ

1本目の記事はこちら。
[Amazon InspectorとMicrosoft Defender for Cloudの比較①脆弱な環境準備AWS編](https://qiita.com/hidekko/items/cd22d675323f054068d7)
2本目の記事はこちら。
[Amazon InspectorとMicrosoft Defender for Cloudの比較②Amazon Inspector有効化と分析結果編](https://qiita.com/hidekko/items/cd22d675323f054068d7)
3本目の記事はこちら。
[Amazon InspectorとMicrosoft Defender for Cloudの比較③脆弱な環境準備Azure編](https://qiita.com/hidekko/items/28c6b72e0a4bfb4e4960)
4本目の記事はこちら。
[Amazon InspectorとMicrosoft Defender for Cloudの比較④Microsoft Defender for Cloud有効化と分析結果編](https://qiita.com/hidekko/items/8324a8b85b4dd345e568)

今回はまとめの記事です。
短いのでサクっと終わらせましょう。

# 検査項目の多さ

|Azure|AWS|
|---|---|
|14|1|

<font color="Red">**Azureの圧勝ですね。**</font>

# 金額の安さ

AzureもAWSもどちらも48時間程度の稼働での請求額です。
|Azure|AWS|
|---|---|
|約700円|訳240円|

検査項目が違うので一概に安いか高いかを言えませんが、<font color="Red">**1項目あたりの単価(請求額÷項目数)だとAzureの方が安いですね。**</font>

# サービス全体の分かりやすさ
個人の所感ですが、記事の長さで短い方が設定項目が少ない＝分かりやすさの目安にはなると思います。

|Azure|AWS|
|---|---|
|項目が多い|項目が少ない|

これも検査項目の多さと関連性があるので一概には言えませんが、<font color="Red">無料枠があるせいでMicrosoft Defender for Cloudはどこまでが無料枠でどこからが有料枠か分かり辛く</font><font color="Red">**AWSの方が分かりやすかったです。**</font>

# セキュリティ診断まとめ
非常に雑ですが、これら3つの項目からAmazon InspectorとMicrosoft Defender for Cloudを比べると、<font color="Red">**Microsoft Defender for Cloudの方が有能であると言えます。**</font>
ちなみにMicrosoft Defender for CloudはAWSアカウントと連携してAWSアカウント(Azureでいうとサブスクリプション)内も検査項目に含めることが可能です。
AWS基盤にある各種リソースをMicrosoft Defender for Cloudで監視する、という使い方もできるので、今後案件として出てくれば検討したいと考えています。

# SQLインジェクションの脆弱性について
また残念ながらAzureではVM、AWSではEC2のWebサーバに存在するSQLインジェクションを発見することはどちらでもできませんでした。
引き続きこのSQLインジェクションの脆弱性を抱える環境はデモ環境として必要です。
今回LAMP環境で作成しましたが、WISA環境にしたり、VM、EC2ベースではなくPaaSに変更したりアップデートを行っていきます。

本日はここまで。
Requestオブジェクトから値を取り出した値をキャストしていませんか？

## 概要

requestオブジェクトから値を取り出す際にキャストした状態で値を取り出す事ができます。

```php
public function store(Request $request)
{
    // bool型にキャストして取り出し
    $request->boolen('is_active');

    // string型にキャストして取り出し
    $request->string('name');

    //Carbon型にキャストして取り出し
    $request->date('start_date');

    //int型にキャストして取り出し
    $request->integer('number');

    //enumにマッチした値を取り出し
    $request->enum('status', Status::class);
}
```

## 参考

### bool型キャスト
https://readouble.com/laravel/10.x/ja/requests.html#retrieving-boolean-input-values
### string型キャスト

https://readouble.com/laravel/10.x/ja/requests.html#retrieving-stringable-input-values

### Carbon型キャスト
https://readouble.com/laravel/10.x/ja/requests.html#retrieving-boolean-input-values#retrieving-date-input-values


### enum型キャスト
https://readouble.com/laravel/10.x/ja/requests.html#retrieving-boolean-input-values#retrieving-enum-input-values
Intune Windows OS の登録者、プライマリユーザーについて

## はじめに

こんにちは:grinning:
IntuneでWindowsを管理するにあたり、登録者とプライマリユーザーの違いを理解しておく必要があったので、少々まとめてみました。

## プライマリユーザーと登録者
Intuneにデバイスを登録するとレコードの概要メニューにプライマリユーザーと登録者が存在することがわかります。
![プライマリユーザー.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584466/cf1f8b97-9fd3-87d6-18fc-1f0fdf484e8f.jpeg)

iOSやAndroidは変更不可なのですが、Windowsはプライマリユーザーを「なし」や「登録者と異なるユーザー」に変更することもできます。

Windowsは変更可能
![プライマリユーザー2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584466/35db92d1-7928-b08b-8617-2e2b3a7189ee.jpeg)

iOS/Android はグレーアウトされており変更不可
![プライマリユーザー3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3584466/1fc3f581-5c8e-3486-3202-590b0bd98ae1.jpeg)

登録時にプライマリユーザーが割り当てられるケースは[こちら](https://learn.microsoft.com/ja-jp/mem/intune/remote-actions/find-primary-user#who-is-assigned-as-the-primary-user)でまとめられています。

## 登録者とは
文字通りIntuneにデバイスを登録したユーザーです。
WindowsのIntune登録は様々な方法がありますが、登録のアクションを起こしたユーザーは登録者になります。一般的な下記の登録方法では登録時に登録者とプライマリユーザーが同一のユーザーで設定されます。
・Entra JoinからのIntune登録
・Hybrid Entra JoinからのIntune登録
　※登録というオペレーションが発生しないため、「Windows にサインインする最初のユーザー」となります。

 登録者は変更、削除ができません。
 登録者に設定されているユーザーアカウントを削除してしまうケースがある場合は、プライマリユーザーが設定されていれば、問題ないとされているようですが、両方居なくなるとライセンス状態が満たされなくなり、非準拠の状態になります。

## プライマリユーザーとは
Microsoftのページ [プライマリ ユーザーとは](https://learn.microsoft.com/ja-jp/mem/intune/remote-actions/find-primary-user#what-is-the-primary-user)に記載がありますが、わかりづらいですよね。
端末利用者を設定しておけば問題がなく、ポータルサイトアプリからのアプリインストールなどを行えるユーザーとなります。

Intuneライセンスの台数１５台までという制限はこのプライマリユーザーでカウントされます。

またプライマリ ユーザーを「なし」とした場合、そのデバイスは "共有デバイス" という扱いになります。

## まとめ
Intune登録は管理者が行い、端末を貸与する際にプライマリユーザーを利用者にする運用がある場合などは登録者、プライマリユーザーをうまく使って運用が必要になると思います。
細かな違いはまた今度整理しようと思います。
Oracle Analytics Cloud で Delta Sharing （データ共有）で Autonomos Database に接続してみた


# はじめに
Oracle Cloud で簡単にサーバーを作ることができる Oracle Analytics Cloud (OAC) という分析ツール(BIツール)で、同じOracle Cloud 上で作成できる Autonomous Database に Delta Share プロトコルで接続できるようになりましたので、実際に接続してみました。
Delta Sharing は、使用するコンピューティング プラットフォームに関係なく、他の組織と安全にデータを共有するために Databricks によって開発されたオープン プロトコルです。

# 1.Autonomous Database のデータ共有設定
Autonomous Database の データ共有の方法は、[Autonomous Database データ共有で共有した表をpandasで読み込む](https://qiita.com/wahagon/items/f98f4f6ed3ad0da44104)記事の「共有の作成」を参照
[共有の作成](https://qiita.com/wahagon/items/f98f4f6ed3ad0da44104#%E5%85%B1%E6%9C%89%E3%81%AE%E4%BD%9C%E6%88%90)

OAC で  Delta Share に使う delta profile(delta_share_profile.json) 入手方法も上記記事の「共有の消費」参照
[共有の消費](https://qiita.com/wahagon/items/f98f4f6ed3ad0da44104#%E5%85%B1%E6%9C%89%E3%81%AE%E6%B6%88%E8%B2%BB)

# 2.Oracle Analytics Cloud で Delta Share 接続を設定する
Data Visualization での接続は、右上の [作成] から [接続] をクリックし、[Delta Share] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112379/5d3c92d2-d4d9-668a-7e8c-738067d47848.png)

「接続名」は、任意でユニークな名前を入力します。
「説明」の入力は任意です。
[Delta Share]設定画面で、[ファイルのインポート]をクリックし、上のAutonomous Database のデータ共有設定で取得した、delta profile(delta_share_profile.json) を選択して、アップロードします。すると、各接続パラメータを自動入力することができます（もちろん、ファイルを開いて、各項目を手動入力もできます）。
最後に保存をクリックすると、接続が作成されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112379/9d780bb3-9bf0-9cde-b01f-0035aebf102f.png)

# 3.Oracle Analytics Cloud で Delta Share 接続したオブジェクトでワークブックを作成する。
Data Visualization での接続は、右上の [作成] から [データセット] をクリックします。
データセットの作成画面から、上の作成した Delta Share の説明名のアイコンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112379/69d00e70-2697-dcf1-80ef-b9b2121d0033.png)

データセットの作成画面で、左から共有された表を右側にドラッグ＆ドロップします（共有されたオブジェクトは、[共有の提供名] - [スキーマ名] - [オブジェクト名]で展開されます）。
右上の保存ボタンをクリックし、データセットに名前をつけて保存し、右上の[ワークブックの作成]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112379/c2b82e1e-fac7-2cf5-3c25-49ce5e2820d8.png)

ワークブックの作成画面から、左の「データ・パネル」からデータ項目を選択し、ビジュアライゼーション・キャンバスにドラッグ＆ドロップすると、ビジュアライゼーション（見える化）して、簡易ダッシュボードを作ることができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3112379/e93f1501-5991-dc51-e2d7-7de0436a9bd7.png)

以上、 Autonomous Database から Delta Share (データ共有)を使い Oracle Analytics Cloud で見える化でした。最近、注目されている Delta Sharing で Autonomous Database や Oracle Analytics Cloud でも対応できており、セキュリティを保ちつつ簡単にデータ共有できます。他の用途でも使い道が広がりそうです。
【GAS】スプレッドシートでかんたん時間管理

GAS を使えばスプシで Clockify みたいなことができます！

# GAS

```ts
function getDataSheet() {  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("test");  
  
  return sheet;  
}  

function recordTimeHoge() {
  var sheet = getDataSheet()
  var lastRow = sheet.getLastRow();
  var currentDate = new Date();
  sheet.getRange(lastRow + 1, 1).setValue(currentDate.toLocaleTimeString());
  sheet.getRange(lastRow + 1, 2).setValue("ほげ");
}  
```

`test` シートを呼び出して、1 列目に打刻、2 列目に「ほげ」と書き込みます。

スプレッドシートの方で図形を作ってスクリプトを紐づければ記録ボタンの完成です。

# やってみよう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509303/788bb3df-816d-02bc-64e5-2a8ee2ff6086.png)

ほげ記録ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/509303/1b44825b-ff70-b5f7-0106-17a5cac6ab38.png)

ほげをした時刻が記録されました！

# 応用
「ほげ」以外の文字列を記録するボタンをいくつか用意しておけば、タスクをカテゴリ分けして時間管理できます。

# おわり
動作がもっさりしてて使い心地が悪い。
C# OpenFileDialogのFilterプロパティの書き方

1. 指定値に縦棒"|"が必要です。縦棒がなければ、ダイアログが開けない。
1. 複数のパターンを指定するときも縦棒が必要です。

例：
"|パターン1"
"パターン1の説明|パターン1"
"パターン1の説明|パターン1|パターン2の説明|パターン2|パターン3の説明|パターン3"

### 1. "|パターン1"
```
private void Btn_Click(object sender, EventArgs e)
{
    using(OpenFileDialog op = new OpenFileDialog())
    {
        op.Title ="Open file";
        op.Filter = "|*.csv";
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344598/3201369a-0129-c602-be4d-4800cb398166.png)



### 2\. "パターン1の説明|パターン1"
```
private void Btn_Click(object sender, EventArgs e)
{
    using(OpenFileDialog op = new OpenFileDialog())
    {
        op.Title ="Open file";
        op.Filter = "csvファイル|*.csv";
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344598/384f49d0-81fa-49ea-56b8-b099baec707d.png)



### 3\. "パターン1の説明|パターン1|パターン2の説明|パターン2|パターン3の説明|パターン3"
```
private void Btn_Click(object sender, EventArgs e)
{
    using(OpenFileDialog op = new OpenFileDialog())
    {
        op.Title ="Open file";
        op.Filter = "csvファイル|*.csv|txtファイル|*.txt|xlsxファイル|*.xlsx";
    }
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344598/b5b2e4bc-5ec5-9d0b-2d88-351f7b022f13.png)
VBAでもコメントヘッダを楽に書こう

## 最初に
コードを編集している際にはコメントを適宜入力していると思います。「'」を入れれば以降はコメント扱いになりますね。

subやfunction （VBAだとプロシージャ）作成時にこのプロシージャは何をするものかについてコメントヘッダを記述することがあると思います。私は必ず書きます。見直したときにこのプロシージャって何だっけ？となる事を減らすことができます。

## 言うかて工藤
コメントヘッダに書くことって結構いっぱいありますね。プロシージャの名称（その説明）、引数（各個に説明）、戻り値の説明などなど。
また、ある程度修飾しておかないと、といったことから手作業で書くのは結構手間です。良くあるのはテンプレートを別途用意しておいて、それを張り付けてから記入する方法でしょうか。

## アドオンを使ってコメントヘッダを生成
ここで、簡単にコメントヘッダの様式が生成できるアドオンを紹介します。

http://mtj-k.no.coocan.jp/software/office_vb6/

こちらで配布している
・AddLineNumbers VB6/VBA
・AddLineNumbers VBA for x64
がそうです。

32bit版と64bit版に分かれていますが、導入するOfficeのbit数に合わせてください。

導入方法は添付のreadmeをご覧ください。
導入後はすべてのOfficeで有効になります。（Access、ExcelどちらのVBEでも動きます）

使い方について。
例えば、次の様なプロシージャを書きました。
```vb
Private Function hogehoge(ByVal param1 As String, ByRef param2 As Integer) As Variant
```
その１行上で「'''」（アポストロフィーを3つ）入力すると
```vb
'''
Private Function hogehoge(ByVal param1 As String, ByRef param2 As Integer) As Variant
```


```vb
''' <summary>
'''
''' </summary>
''' <param name="param1"></param>
''' <param name="param2"></param>
''' <returns></returns>
''' <remarks></remarks>
Private Function hogehoge(ByVal param1 As String, ByRef param2 As Integer) As Variant
```
このようにコメントヘッダのレイアウトが生成されます。
後はそれぞれの項目に説明文を追記するだけです。

```vb
''' <summary>
''' ほげほげをいい感じにする
''' </summary>
''' <param name="param1">引数その１：文字列</param>
''' <param name="param2">引数その２：int</param>
''' <returns>できあがったほげほげ</returns>
''' <remarks>いい感じってなんですかね。</remarks>
Private Function hogehoge(ByVal param1 As String, ByRef param2 As Integer) As Variant
```
私は次のような感じでそれぞれを記載しています。
summary：プロシージャ名（簡単な説明）
param　：引数の説明
returns：戻り値の説明
remarks：プロシージャの詳細説明や注意点

これで、コメントヘッダの完成です。
プロシージャを作ったときにコメントヘッダを残しておきましょう。

## 最後に
人は忘れる生き物です。先週の自分が何を考えてコードを書いたかなんて、今思い出せないことの方が多いです。そのため自分のためにコメントを残しましょう。
何を作ったか忘れてしまう前に。

## 余談
アポストロフィ３つでコメントヘッダが生成される動きは往年のvisualStudioっぽくて気に入っています。（現行のvisualStudioはどうなのかなぁ）
3.pandas 2.0以降のエラーについて


**3.pandas 2.0以降のエラーについて**

pandas1.5.3まで使用可能だった一部のメソッドについて、pandas 2.0以降では廃止（エラー）になるため、下記にまとめます。

・目次
3.1.警告機能
3.2.廃止機能
　3.2.1.appendメソッド

<br>
<br>

**3.2.廃止機能**
append()：以下発生
　AttributeError: 'DataFrame' object has no attribute 'append'. Did you mean: '_append'?

pandas 2.0で廃止された機能（2023/4/3　リリース）
　※2023/12/8時点最新はpandas 2.1.3  (2023/11/10　リリース)

対策：
```Python.
 df = df.append(pd.Series(data), ignore_index=True)
```

↓
```Python.
 df = pd.concat([df, pd.DataFrame([data])], ignore_index=True)
```


<br>
<br>
<br>

以上！
ddRawSql() メソッドでSQLとバインドパラメータを同時に閲覧しよう

## 概要

LaravelでEloquentのクエリを確認する際、多くの方はこう書いてると思います。

```php
$sql = Store::query()->where('name', '東京店')->toSql()
dd($sql);
//"select * from `stores` where `name` = ?" 
```

実はこれ、バインドパラメータは閲覧できません、別途`getBindings`を実行する必要があります。
```php
$parameters = Store::query()->where('name', '東京店')->getBindings()
//array:1 [▼ 
//  0 => "東京店"
//]
```

しかし、`ddRawSql`を使うと!!

```php
Store::query()->where('name', '東京店')->ddRawSql();
//"select * from `stores` where `name` = '東京店'"
```

SQLとパラメータが同時に見れます

## 参考
https://readouble.com/laravel/10.x/ja/queries.html?header=%25E3%2583%2587%25E3%2583%2590%25E3%2583%2583%25E3%2582%25B0
クライアントアプリを作る際のPackage共有管理

# 概要
複数のアプリケーションを開発する際、
それぞれ完全に別で実装する方針があると思いますが、
共通のPackageを作成してそれをお互いに参照する方針もあります。

タイミーではワーカー用のアプリはありますが、現在クライアント用のアプリは存在しません。
もし作成することになれば、ワーカーアプリと同様な体験を提供するために、
共通のPackageを参照することを手段の一つとして考えることができます。

ワーカーアプリとクライアントアプリで開発チームが同じで、
同じWorkspace上での開発あれば、特にバージョン管理の必要はないかもしれません。
ですが、クライアントアプリの変更がリアルタイムでワーカーアプリに影響し、
また規模が大きくなり開発を分ける可能性があることを考えると、
Packageのバージョン管理が必要になるかもしれません。

以下にPackageを編集し、バージョン管理を行う方法をまとめました。

## 公式のPackageの更新方法

https://developer.apple.com/documentation/xcode/editing-a-package-dependency-as-a-local-package

## 公式の手順とは異なる方法

公式のドキュメントとは異なる方法ですが、
こういったやり方もあるよということをご紹介します。

### 最初の状態

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/8bd28790-95d7-21c2-4199-72e60f081117.png)

ここから、Utility Packageを編集し、バージョンを更新します。

### 手順
* 対象のPackageをgit clone

* 以下のようにして、remoteのレポジトリの参照を削除

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/9573666b-ed6a-0d40-257f-8205444d85d0.png)

* Add Localをしてlocalのpackageを追加 

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/ab799daf-7ee6-5fe3-f5b3-031da365454f.png)

* localとなっていることを確認し、更新

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/6ddcfba9-ff23-2b52-5859-34728113ce40.png)

* 変更をcommit及びpushして、新たなtagを設定

* 以下のようにして、localのレポジトリの参照を削除

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/5c8853c7-1dae-af3c-e094-b5a0792b9c4b.png)

* remoteのPackageをAdd Package

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/574ffc09-75fe-f81b-af9d-ca2d659ffd2d.png)

* バージョンが更新されていることを確認

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/69532/759c4a59-d474-4e1c-a6f0-379cd6265d7e.png)

## 注意点
共有するPackageの更新頻度が高すぎると、お互いの変更を取り込むのが大変で、バージョンが分かれて結局別で作ったほうがいいよねという話になります。はじめの方はUIなど更新頻度の高いロジックは避けて、やるとしたら更新頻度の少ないデータロジックなどの共有が良いかもしれません。

## 今後
現状はこういったパッケージを共有する管理の想定がおそらく無いため、ユーザーアプリから切り離してすぐに共有できるわけではなく、もし仮にクライアントアプリを作るとしたらタイミングによっては完全に別で作る可能性もありますが、機会があれば推進力をもってユーザーアプリの抽象化、共通化を進めたいと考えています。