OmniAICreator/Qiita-1.07M huggingface dataset:
Node.js上でのバージョン管理ツールにVoltaを使ってみた話

# 解決したい課題

少し前の教材を進めていたところNode.js上で
```
 Error: error:0308010C:digital envelope routines::unsupported 
```
が発生したので解決策を調べてみた

# 原因

よく読んでみるとわかりますがUNSUPPORTEDであることが分かります。
つまりNode.jsが実行環境に対応してないよ！という話でした。（発生当時のバージョンは@18）

# 解決策の調査

Node.jsのバージョン管理ツールについて調べてみる
- nvm（https://github.com/nvm-sh/nvm)
- nvm-windows（https://github.com/coreybutler/nvm-windows）
- nodebrew(https://qiita.com/mame_daifuku/items/373daf5f49ee585ea498)
- Volta（https://volta.sh/）

今回はVoltaを使ってバージョン管理を行ってみました

## Voltaの選定理由

nvmはcurlやwgetコマンドを使うため面倒であった（インストール済みのバージョンも削除する必要があった）
nvm-windowsもインストール済みのバージョンを削除する必要があった
上記2点は弊害を恐れて回避できないか模索しました。

nodebrewとvoltaで悩みましたが、解説が最新でありわかりやすかったためvoltaで行いました。

## 実行

https://volta.sh/ のGetting Startedからwindows installerを起動
起動後コマンドラインで以下を実行
```
volta install node@{version}
```
（@~を除くと最新のLTSリリースを取得してきます。）

## 補足

package.json内に
```
"volta": {
  "node": "12.20.2",
  "yarn": "1.19.2"
}
```
を記入しておくことでバージョンの指定もできそう。
VoltaはRustによって開発されている様子ですがRustも気になるこの頃。
麻雀で学ぶTypeScript　補足説明 


とりあえず[最初の記事](https://qiita.com/bonetaro/items/0b12f42e03d8fb69444c "麻雀で学ぶTypeScript")を書いてみたものの、ページの作成単位？（区切り）に悩みつつ、書きもれたことを備忘的に記載します。

# 麻雀の主な情報源
https://ja.wikipedia.org/wiki/%E9%BA%BB%E9%9B%80

https://en.wikipedia.org/wiki/Mahjong

麻雀用語の英単語は、なじみが薄いものが多くコード上のネーミングにも多々ブレがあります。Type.tsなどは型に漢字すら使用しています。一応問題なく動作しているようなので、一旦このままにしますが、一貫性をもたせたいところです。

# ライブラリ
- winston (ロギング)
- Jest（単体テスト）
- linqts（コレクション処理）
標準ぽいのを採用したつもりですが、コレクション処理には普段の仕事がC#ですのでLinq実装のものを採用しました。他にベターなものや便利なライブラリがあれば探したいです。コメントも少ないですし、TSDocやクラス図作成ツールなどあるといいかもです。

# 可視化
現状では牌の確認するときには絵文字で表示していますが、視認性は相当悪いです。このあたりはHTMLにすれば改善すると思いますが、Web技術を使いだすと考慮範囲が広くなってしまうので、しばらくはターミナルだけで開発したいです。今後牌をツモったり捨てたりするのも含め、UI/UXが悩みどころです。

# 参考にさせていただいているすべて
いうまでもなく麻雀にかかわる先人、書籍、メディア、サイト、プログラムなどなどは数多くございます。すべてに敬意をもちつつ、イチ麻雀愛好家として、楽しみながら技術を学ぶ題材として麻雀を使わせていただきます。

# 追記
先日、順子のロジックを調べていたら、これから実装するであろう内容にとても参考となる（ほぼ答え？）記載されているページを見つけてしまいましたので、参考にさせていただく感謝と敬意の代わりに、列挙させていただきます。

https://blog.manaten.net/entry/2021/12/03/030217

https://hrtyy.dev/anything/mahjong-kun/

https://www.m3tech.blog/entry/2022/05/27/110916

今やっていることが当然、先人の二番煎じ、三番煎じであろうことは承知していますが、何か問題があれば、ご指摘、ご教授お願いします。
FlaskでGETリクエストの二種類を駆使する

あけましておめでとうございます。
2023年は皆さまにとってよりよい年になりますように。
### 問題背景
さて、年の初めからPythonフレームワークのFlaskを触っていると、GETメソッドについて壁にぶつかりました。
フォームはPOSTの形式でデータを送信します。ただ、POSTでリクエストするまでもない場合があります。
そこでクライアントからinputされたデータを、GET方式で送り返そうと思ったのですが。。。
```HTML:sample.html
<!DOCTYPE html>
<html>
<body>
<h1>入力したものを表示させる</h1>
<form method="GET" action="">
  <label for="item">適当になんか入力してみて</label>
  <input id="item" name="item">
  <input type="submit" value="Submit">
</form>
<p>{{ item }}</p>
<!-- 受け取った情報をflaskのGETで返す -->
</body>
</html>
```
```Python:sample_view.py
import requests
@app.route('/', methods=['GET'])
def Hello():
    return render_template('sample.html')

@app.route('/', methods=['GET'])
def view():
    input_data = request.args.get('item')
    return render_template('sample.html', item = input_data)
```
しかしこれではGETがどちらかわからず、ただ、sample.htmlを表示させるだけとなります。残念ながら、itemが表示されません。
### 解決法
GETでデータの送信とルートに入ったときにただHTMLを表示させるという二つを区別するために、クエリパラメータが大事になります。
クエリパラメータとは、
URLの後ろについている?=&みたいなやつです。
例えば、Yahoo!の検索では、、、
`https://search.yahoo.co.jp/search?p=%E9%AC%BC%E6%BB%85%E3%81%AE%E5%88%83%E6%AF%80%E6%BB%85&fr=top_ga1_sa&ei=UTF-8&ts=3965&aq=-1&oq=&at=&ai=944333f4-0630-4f45-a677-0e3ccda7fee4`
のsearchの後ろについている？のようなものです。

つまり、GETではただHTMLを表示させることと、データ送信の二つをこのクエリパラメータによって判断するのです。
従って、これをPythonに落とし込むと、、
```Python:sample_view.py 改
import requests
@app.route('/', methods=['GET'])
def view():
    input_data = request.args.get('item')
    if input_data is None:
        return render_template('sample.html')
    return render_template('sample.html', item = input_data)
```
とこんな感じになります。
これによって、クライアント側に表示させることができました。

これは、`request.args`のargsプロパティにクエリパラメータを格納されるからだとされています。

参考文献
・「Flaskを使用してクエリパラメータを取得する」
https://www.delftstack.com/ja/howto/python-flask/flask-get-query-parameters/
・GETメソッドによるパラメータ渡し
https://zenn.dev/masahiro_toba/books/3daf7dc0d5dfd7/viewer/c07433
LaravelでSQLをすぐに実行したいとき

## 結論
```DB:statement()```を使う。

## 使い方
例えば```UPDATE users SET name = 'Laravel' WHERE id = 5```というSQLをLaravelで実行したいとき、下記のように記述する。

```
DB:statement("UPDATE users SET name = 'Laravel' WHERE id = 5");
```

## 背景
すぐ対応する必要があって、SQLが自分で組めるなら、このような対応でまずは良いかなと思い実装。
c++ 最適化

https://stackoverflow.com/questions/41361631/optimize-in-cmake-by-default
https://news.mynavi.jp/techplus/article/20160301-a128/
https://openbenchmarking.org/result/1602289-GA-SKYLAKEXE19

osx clang
https://mem-archive.com/2019/08/17/post-2016/
https://mem-archive.com/2019/08/17/post-2038/
https://msyksphinz.hatenablog.com/entry/2022/05/23/040000
https://blog-dry.com/entry/2020/08/10/142006
YAMAHA RTX32のL2TP VPN設定例

何も考えずにメルカリでVPNルーターを買ったのですが、かなり設定に時間を費やしましたので、内容を共有しておきます．
RTX810のOEMで同一仕様のようですが、コマンドでの設定となるため、シリアルケーブルが必要です．

私が購入したシリアルケーブルのURLを載せておきます．
↓
[エレコム RS-232Cシリアルリバース D-Sub9ピンメス - D-Sub9ピンメス 1.5m](https://www.amazon.co.jp/dp/B0000A41GX) - amazon.co.jp
[DEN-NO USB-RS232C変換ケーブル（D-SUB9ピン）](https://www.amazon.co.jp/dp/B018206M92) - amazon.co.jp

コマンド操作の方法はこちらのサイトが参考になります．
↓
[RTX32を買った：ささの備忘録](https://nekowara.info/archives/12574658.html) - nekowara.info

下記の内容を自身の環境に合わせて変更し、config.txtとして保存します．
USBにコピーして読み込ませれば完了です．

コマンドで一行ずつ入力していくことも出来た気がしますが、記述量が多いのでオススメはしません．
```
#11 2 4 0
ip route default gateway 192.168.XXX.XXX (←デフォルトゲートウェイIP)
ip lan1 address 192.168.XXX.XXX/24 (←VPNルーターのIP)
ip lan1 proxyarp on
provider lan1 name LAN:
pp disable all
pp select anonymous
 pp name XXXX (←VPN名)
 pp bind tunnel3
 pp auth request chap-pap
 pp auth username XXXX XXXX (←ユーザー名 & パスワード)
 ppp ipcp ipaddress on
 ppp ipcp msext on
 ip pp remote address pool 192.168.XXX.XXX 192.168.XXX.XXX 192.168.XXX.XXX (←VPN接続端末に割り当てるIP *1つでもOK)
 ip pp mtu 1258
 pp enable anonymous
no tunnel enable all
tunnel select 3
 tunnel encapsulation l2tp
 ipsec tunnel 103
  ipsec sa policy 103 3 esp aes-cbc sha-hmac
  ipsec ike keepalive log 3 off
  ipsec ike keepalive use 3 off
  ipsec ike local address 3 192.168.XXX.XXX/24 (←VPNルーターのIP)
  ipsec ike nat-traversal 3 on
  ipsec ike pre-shared-key 3 text XXXX (←パスワード)
  ipsec ike remote address 3 any
 l2tp tunnel auth off 
 l2tp tunnel disconnect time off
 l2tp keepalive use on
 l2tp keepalive log on
 l2tp syslog on
 ip tunnel tcp mss limit auto
 tunnel enable 3
ipsec auto refresh on
ipsec transport 3 103 udp 1701
url filter use off
dns server 192.168.XXX.XXX (←DNSサーバー *ほとんどの場合、デフォルトゲートウェイIPと同じ)
dns private address spoof on
l2tp service on
httpd host any
upnp use on
sftpd host any
```
以上です．
WordPressのプラグイン開発環境作り

WordPressのプラグインを作ることになり、開発環境を調べていました。
Windows11上で使っているvirtualBoxで、Ubuntu 22.04.1 LTSを使っています。
ここに、作ります。
既に下記のように、インストールされていました。

```bash
node -v
v14.21.2

npm -v
6.14.17


```
ここに、Dockerをインストールしました。

https://docs.docker.com/desktop/install/linux-install/

そして、下記の公式の記事に従い、Node Version Manager (nvm) をインストールしました。

https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/


ターミナルを終了した後再起動して、下記のコマンドでインストールしました。
```bash
nvm install 14
```
その後、Dockerを起動して、下記をインストールしました。
```bash
npm -g install @wordpress/env
```
こちらのコマンドで、正しくインストールされたか確認しました。
```bash
wp-env --version

5.8.0
```
そして、下記のコマンドで、インストールしました。
これで、プラグインの雛形ができるような説明でした。

```bash
~$ npx @wordpress/create-block gutenpride
```
こちらの記事を参考にしました。

https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/


https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/wp-plugin/

WordPressを起動したら、英語版で英語しか選択肢が無かったです。
そのため日本語化をネット検索しました。
languagesフォルダを英語版の方に追加して、準備しました。
そして、日本語版のlanguagesフォルダの中身を、英語版のlanguagesフォルダにコピーしました。
この方法で、日本語化しました。
でも、こちらの記事で、もっと簡単な方法が紹介されていました。

https://yosiakatsuki.net/blog/wp-env-install/

wp-envというフォルダが、ユーザー名の直下にできます。
その中のtests-WordPressというフォルダが、カスタマイズできるWordPressです。

![スクリーンショット_20230102_171843.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/20977/f92063f5-418e-b769-4364-b1a7cb388076.png)

私は、LOCALという環境を使って、WordPressのテーマのカスタマイズや引っ越し後の復旧の検証などを行っています。

https://localwp.com/

こちらを使っても代替えとして、使えるので大丈夫です。
私は、この他にXAMPPを使ったこともあります。


## WordPressプラグイン開発に役立つ情報

https://www.webopixel.net/wordpress/631.html

https://tart.co.jp/wordpress-plugin-original-create/

こちらも、分かりやすいです。

https://wpmake.jp/contents/plugin/wp_plugin_make/

https://qiita.com/takeshi_du/items/09d4d61217fce1563c97

設定を保存できるようになりたいので、こちらの記事も役立ちます。

https://qiita.com/TanakanoAnchan/items/f1191c4c008f0a2b7c2e


今回の記事は、私の備忘録の意味も込めて書きました。

## 一度止めた作業を再開する場合
パソコンの電源を落としたり、仮想環境から抜けた後に作業を再開するときは、注意が必要です。

wp-envで起動したディレクトリGutenprideの中で、wp-env startをスタートしてください。
この手順で実行しないと、新しく実行環境のコンテナ？が出来てしまいます。
そして、最初に作った環境が壊れてしまい使えなくなってしまいます。

### プラグインを開発したい向けの公式の記事
https://ja.wordpress.org/team/handbook/block-editor/getting-started/create-block/wp-plugin/

### ローカル環境を作る直す際に役立つ公式記事
https://ja.wordpress.org/team/handbook/block-editor/getting-started/devenv/
麻雀で学ぶTypeScript

新年あけましておめでとうございます。

年も改まり新しく何か技術を学びたいという気持ちを吐き出すために、ずっとROMだったQiitaに記事を書くことにしました。
ただ何も目的なく学ぶのもどうかと思い、いつまでも雀力が成長しない麻雀を題材にしたいと思います。

最初に学ぶ技術としては、TypeScriptです。
仕事でも使う可能性が高いのと、麻雀をどこまでTypeScriptで表現？できるかに興味がありました。とりあえず思い立った勢いで、思いつくままコードを実装してみました。

https://github.com/bonetaro/mahjong-ts

とりあえず、半荘を開始して手牌を配るところまで動作します。
![スクリーンショット 2023-01-02 175449.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4989/cb90d548-fbb4-0f58-1648-5c0c83e7ded0.png)

```
npm i 
npm build
npm start
```


麻雀ゲームを作るのが目的ではないため、実装としては、実用性よりも可読性を意識しています。
TypeScriptでどういう実装ができるかを試すことに興味があります。

当面の目標としては、アガリ判定ができるようにすることにします。

Qiita初投稿ですし、技術的にも未熟な部分は多々あると思いますので、ご指摘、ご意見は歓迎します。
Karabiner-Elementsのインストール＆設定＆アンインストール

# 概要
- Karabiner-Elementsのインストール＆設定（主にキーバインド）＆アンインストールの方法について簡単にまとめてみました。
- 動作環境
    - macOS Ventura 13.1
    - Homebrew 3.6.16
    - Karabiner-Elements 14.10.0
## Karabiner-Elementsとは
macOSのキーボードをカスタマイズするためのツールで、キーバインド設定などができます。

# インストール
[公式サイト](https://karabiner-elements.pqrs.org/)からダウンロードしてインストールすることも可能ですが、今回は[Homebrew](https://brew.sh/index_ja)でインストールすることにします。
```bash
brew install --cask karabiner-elements
```

# キーカスタマイズ
私自身がよく使う以下の３つのキーバインド設定を行います。個別のデバイスに対して設定することも可能ですが、今回は全てのデバイス（「For all devices」）に対して設定します。
- caps lock to ctrl
- ctrl + hjkl to Arrow Keys
- ctrl + [ to escape

まずKarabiner-Elementsを起動します。
![Screenshot 2023-01-02 at 10.45.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/22f97489-83da-c625-c17c-b96dd14798b5.png)

## caps lock to ctrl
`caps lock`キーを`ctrl`キーに変えるための設定です。US配列のキーボードを使っていますが、JIS配列とは違ってctrlキーが左下にあるからです。

「Simple Modifications」の「Add item」をクリックします。
![qSwWnGjoGpY95GO1672624584_1672624623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/4fa17017-0d4b-fa77-4437-7f7e42dcb4bf.png)
「Modifier keys」から「caps_lock」と「left_control」を選択します。
![DabeBCKkZKWLopu1672624692_1672624707.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/1a64e19d-eb72-22e1-dd61-06024b008baf.png)
![hd3yzMJ8h4UU4Ov1672624765_1672624775.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/a068db5d-bd63-e119-b59e-89ff02bf2674.png)

## ctrl + hjkl to Arrow Keys & ctrl + [ to escape
**ctrl + hjkl to Arrow Keys**は`ctrl` + `h` `j` `k` `l`を方向キーに変えるための設定です。例えばVimのINSERTモードでカーソルを動かしたい場合、Vimのデフォルトのカーソル移動用のキー（hjkl）をそのまま使えるので、便利かなと思います。またVimだけでなく、ターミナル等の操作時にも使えます。
**ctrl + [ to escape**は`ctrl` + `[`を`ecs`キーに変えるための設定です。主にVimを使う際の設定です。

「Complex Modifications」の「Add rule」をクリックします。
![Screenshot 2023-01-02 at 10.47.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/f8f86b0d-7aa3-af18-ab14-f94c5beee73d.png)

「Import more rules from the Internet」をクリックするとブラウザが開きます。
![Screenshot 2023-01-02 at 10.48.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/1d0ebd80-2c12-ba13-a394-c50054e28031.png)

「vim」と検索すれば該当設定が出てくるので、そのまま「Import」をクリックします。
![Screenshot 2023-01-02 at 10.50.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/0377db53-2d06-1b95-ba64-bcc75c4a6b79.png)

![Screenshot 2023-01-02 at 10.50.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/52459a5e-d476-93f7-acd0-653a2813bede.png)

また、既存の設定をインポートするだけでなく自分で作成することも可能です。詳細は公式[ドキュメント](https://karabiner-elements.pqrs.org/docs/)をご覧ください。

# アンインストール
brewでインストールした場合は以下のコマンドでアンインストールできます。
```bash
brew uninstall karabiner-elements
```
公式サイトからダウンロードした場合は、インストール後アプリにロックがかかるため、通常の方法では削除できないようです。
![Screenshot 2023-01-02 at 10.51.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/d50e59b0-6631-65be-30fe-2f38dc06edd3.png)
アンインストールするには、アプリ内のuninstallerを使います。
![Screenshot 2023-01-02 at 10.51.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2954734/5bad1f73-09a9-891d-651e-8cd03747b4cf.png)
Spring Security Udemyの講座選定

# 概要
ポートフォリオの取り組みの中で　Spring Securityで詰まるところが多いのでUdemyで勉強し直します。
この講座を受けてSpring Securityを使いこなしたいですね（願望）




# 選んだ講座

## Spring Security Core: Beginner to Guru
https://www.udemy.com/course/spring-security-core-beginner-to-guru/

### 良いと思ったところ
テストコードが書かれている。TDD形式で進めるらしいので最高　この時点で１００点中１００点だね
最高評価
InteliJ使ってる
インメモリーデータベースのH2とJPAを使ってるからrepository-データベースの設定が楽そう→SpringSecurityに集中できそう

### NGだった点
JWT認証がない
outh2.0がないのも気になる。古い印象が強い

SpringSecurityのアーキテクチャについて理解するのが一番なんで
JWTは別のやり方で把握します。

# その他候補



## Spring Security Zero to Master along with JWT,OAUTH2

https://www.udemy.com/course/spring-security-zero-to-master/

### 良いと思ったところ
JWT認証がある

### NGだった点

テストコードがない。


## Spring Security Fundamentals (OAuth ,JWT,CSRF and more)

https://www.udemy.com/course/spring-security-fundamentals/
### 良い理由
JWTがある。

### NGだった点
STS使ってるのがちょっとマイナス
テストの項目あるから良いじゃんと思ったが確認の結果　ポストマンを使ったE2EなのでNGです
細かい動きを確認できる単体テストの書き方が知りたいんだ
2022年の振り返り(KPT)と今年の目標

明けましておめでとうございます。@Esperna です。
昨年は1月から無職で6月半ばにIOTベンチャーに就職して働くという一年でした。
昨年の振り返り(KPT)と今年の目標を書きます。

# 振り返り

## Keep

一言で言うと振返りを継続的にしつつ勉強を１年続けられたのが良かったです。

* KPTを毎週実施したおかげで生活のリズムがとても良くなった
  * 前職までは月80H近く残業しており新しいことをやろうという気力が湧かず
  * 時間に余裕ができ、少し先のことをやっておこうと思えた
  * 意思決定も早くなり、何かトラブルがあっても悪化する前に手を打てていた
* 昨年は計画的に大量に勉強した
  * **読んだ専門書の数 7冊**
    * [プログラミング言語Go](https://www.maruzen-publishing.co.jp/item/?book_no=295039)
      * 練習問題135 問をテスト書いてプログラミングした
      * 仕事でテストを書くのが苦にならなかった
    * [Distributed Services With Go(Go言語による分散サービス)](https://www.oreilly.co.jp/books/9784873119977/)
      * 翻訳のレビューに携わる機会や読書会で読めた
      * Webサービスを理解する助けになって良かった
    * [実用Go言語](https://www.oreilly.co.jp/books/9784873119694/)
      * 読書会で読んで、勉強会中に仕事のバグ(switch文のミス)に気づけた
    * [セキュア・バイ・デザイン](https://book.mynavi.jp/ec/products/detail/id=124056)
      * 社内の輪読会で読んだ
      * セキュリティについて考える良いきっかけになった
      * 過剰に防御的にガードを書く癖があった
      * どこでドメインプリミティブを使うべきか考えるようになった
      * 組み込みの機器を作るのではなくてIOTサービスを作るということを意識するようになった
    * [Javascript Primer](https://tatsu-zine.com/books/javascript-primer)
      * [Web版](https://jsprimer.net/)もあるのだけど、眼精疲労が辛いとき本は助けになる
      * JSで困ったら[MDN Web docs](https://developer.mozilla.org/ja/)と共に必ず見るようにしている
    * [プロを目指す人のためのRuby入門[改訂2版] 言語仕様からテスト駆動開発・デバッグ技法まで](https://gihyo.jp/book/2021/978-4-297-12437-3)
      * コードを書く前にコードを書くための環境について丁寧な説明がありいい本だと思った
      * 業務上必要なのでrubyを勉強中
    * [スーパーユーザーなら知っておくべきLinuxシステムの仕組み](https://book.impress.co.jp/books/1121101019)
      * Linuxを意識した開発をあまりしてなかった
      * 実際に自宅のラズパイと会社の環境でコマンドを打ちながら全章完全に(笑)理解した
   * **オンライン関係**
      * [Standford Online : Machine Learning](https://www.coursera.org/learn/machine-learning)
        * 実際に手を動かしてMLのプログラムを書いた。
        * 分かってないとテストがPASSしないようになってるのが良いと思った
        * （他のこともやりながら）２、3ヶ月かかったのでそれなりの分量だった
        * 業務でもプライベートでも最近機械学習がご無沙汰になってるのはちょっと残念
      * CryptoZombie
        * Beginner向けのチュートリアルを一通り実施した
  * 参加した勉強会
    * [『Go言語による分散サービス』オンライン読書会](https://technical-book-reading-2.connpass.com/)
    * [横浜Go読書会](https://yokohama-go-reading.connpass.com/)
    * [【有料】Gopher塾 #2 - Goらしいコードの書き方 - DAY 2](https://tenntenn.connpass.com/event/268056/)
* Advent Calendarに記事を書いた
  * 12/15 [nodeJS初心者がレガシーコードのnodeJSに単体テストを入れてCIしてみた](https://akerun.hateblo.jp/entry/2022/12/14/nodeJS%E5%88%9D%E5%BF%83%E8%80%85%E3%81%8C%E3%83%AC%E3%82%AC%E3%82%B7%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AEnodeJS%E3%81%AB%E5%8D%98%E4%BD%93%E3%83%86%E3%82%B9%E3%83%88%E3%82%92%E5%85%A5%E3%82%8C)
  * 12/24 [皆どのようにしてコードを書いてるのか？](https://akerun.hateblo.jp/entry/2022/12/24/%E7%9A%86%E3%81%A9%E3%81%AE%E3%82%88%E3%81%86%E3%81%AB%E3%81%97%E3%81%A6%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E6%9B%B8%E3%81%84%E3%81%A6%E3%82%8B%E3%81%AE%E3%81%8B%EF%BC%9F)

# Problem

アウトプットが少なかったことと技術の分野が広く浅かったのが長期的には問題なのかなと思いました。

* Inputに対してOutputが少ない？
  * 理解したことをアウトプットしないと深まらない気がしてる
* 勉強すべき分野が多すぎる気がする
  * nodeJS,Ruby,Goを3つ同時に勉強することはできるけど理解が深まりにくい気がする
  * どれも行って中級者止まりになりそう

# Try(今年の目標)

Rubyを中心に学びつつ自分のキャリアと会社に必要な技術を見極めてアウトプットを出していきたいと思います

* 中心に学ぶ言語を絞って専門性を深める(Goが好きなのだけど多分Ruby)
* 会社で一番大きくインパクトを与える技術を見極めてそこにコミットする
* ブログとかで外部へのアウトプットを増やす
  * ブログ５件
     * Advent Calendar含む
     * ガジェットを弄って記事を書いてみる
     * 少なくとも１件英語でブログを書いてみる
【卒研①】卒業研究について

# はじめに
はじめに、Quiitaで卒業研究のことを書いている理由を説明します。
1. 調べた内容をメモしたり、まとめたりして、頭の中をスッキリさせるため。
2. 来年同じことを調べる人がいたら、その人が楽になるかもしれないから。
3. Qiitaを使ってみたかったから。  

1番の理由が主です。2番はあわよくば程度です。なので、基本的に**自分のアウトプット用**にQiitaに投稿します。

注）調べながら書くので、分かりにくいところや間違っていることも多分あります。

# 本題
私たち「土井研2023」は、卒業研究として、[中之島チャレンジ](https://www.nakanoshima-rc.jp/)に参加します。
あと、同時にFTE様との共同研究も行います。（現時点では）
- 参加者
    - 4人/4人参加
    - 制御：1人
    - 回路：1人
    - 全体設計：1人
    - ハンド設計：1人 

割り振りはこんな感じです。

私は、**制御**を担当します。なので、基本的に制御のことしか書かないです。
プログラムは多少得意で、制御の知識は、Arduinoでロボットを手動で動かせる程度だと思ってください。
なので、調べることが山積みです。:scream:

#### 制作するロボットについて
ロボットの最大の特徴は、足回りが**６脚**です。
ただでさえムズいのに、６脚は普通にやばいです。笑
でも、面白そうなので本気で挑戦したいですね。

- ロボットがすること
    - 2kmものコースを自動運転で移動
        - 障害物を回避 
    - ３種類のゴミを回収
        - ゴミの判別、分別？（ハンド形状による）

- 使用する機器（制御関連）
    - サーボ
    - 各種センサー
        - GPS
        - Lider
        - カメラ？
        など。
    - ESP32
    - ROS

簡単に説明するとこんな感じです。
#### 現時点でのスケジュール

《スケジュール案》
> 12月　大まかな構想を決定
1月　プロトタイプ1を作って、プロトタイプ1を手動機として動かす。
（仮配属期間の報告書に載せるのが目標）
2月　プロトタイプ1を改善して、プロトタイプ2を作る。
(制御は、この期間中にburgerなどでROS(SLAM)を勉強、組み込み)
>
>3月　プロトタイプ3を作る
4月　以降同様
7月　第一回中之島チャレンジ
8月　以降改善と製作
10月　卒研中間発表
11月　第二回中之島チャレンジ
以降卒研発表に向けての詰め？

3月以降の予定は適当ですが、今のところ（12月時点では）こんな感じです。


（土井研生限定：詳しく知りたい人は、共有さている議事録や報告書を読んでください）

# 最後に
この投稿が続きますように…
Udemy の Forbidden 解消方法

Udemy の Forbidden 解消方法。

下記サイトが参考になった。

> https://qiita.com/ebtiag/items/20856ac9d0b2f19bb1d5
検証ツールで、
右クリック＞検証＞Application＞Strage内にある、
「Clear site data」をクリック


再発した場合に備えて、自身向けに補足しておく。

上記を図示すると、下記のようになる。

`F12` を押して、開発モードにする。
そして、下図の 1～3 を実行する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1246056/50658d7f-626e-f922-7690-9d3a7c1e188d.png)
element not interactableを攻略する

Pythonでselenuimを使い、動的なページをスクレイピングしたことのある人ならば、一度は出会ったであろう
```
elem.click()
```
等に対する
```
ElementNotInteractableException: Message: element not interactable
```
（原因がよくわからないという意味で）凶悪なエラー
こちらを以下で解消できたケースがあった。

```
from selenium.webdriver.common.action_chains import ActionChains

# 中略

ActionChains(driver).move_to_element(elem).perform()
elem.click()
```
全てのケースで解決しなさそうだがヒントになれば幸い。
Docker Compose で `php artisan serve` したコンテナの停止に10秒かかる問題の解決

## 問題

以下のようなDockerfileで起動しているような開発用のLaravelコンテナが、 restartや再build後のup等で必ず10秒かかる。

```Dockerfile:Dockerfile
FROM php8.2-fpm-alpine
...
CMD ["php", "artisan", "serve", "--host", "0.0.0.0"]
```

## 原因

Docker Composeの[よくある質問と回答 - サービスの再作成や停止に10秒かかるのはどうして？](https://docs.docker.jp/compose/faq.html#id4)に原因は記載されています。

しかし、ここに書いてあるように `["php", ...]` 形式で書いても、私の場合解決しませんでした。

根本的な問題としてはdocker composeのstopのシグナルが `SIGTERM` であり、 `php artisan serve` は　`SIGINT` を期待していることにあります。

## 解決策

簡単なラッパスクリプトを用意してSIGTERMをSIGINTに変換することで即座に停止できるようになりました。
(1 2 3 15は拾うシグナルでもうちょいちゃんと狭められます...)

```sh:artisan-serve-wrapper.sh
php artisan serve --host 0.0.0.0 &
pid=$!
trap "kill -SIGINT $pid" 1 2 3 15
wait $pid
```

```Dockerfile
FROM php8.2-fpm-alpine
...
CMD ["./artisan-serve-wrapper.sh"]
```

## 参考文献

- [【 trap 】コマンド――シグナルを受け取った際の動作を設定する：Linux基本コマンドTips（324） \- ＠IT](https://atmarkit.itmedia.co.jp/ait/articles/1907/25/news010.html)
brotliメモ

apacheでbrotliを使用するようにした

# インストール
## brotliインストール
```
# su -
# dnf -y install cmake
# exit
$ cd /usr/local/src
$ git clone https://github.com/google/brotli
$ cd brotli
$ mkdir out && cd out
$ ../configure-cmake
$ make 
$ make test
$ su -
# make install
```

## ldconfigの設定 
```
# echo /usr/local/lib > /etc/ld.so.conf.d/usr-local-lib.conf
# ldconfig
# exit
```

# apache 
# apacheのconfigの修正
configureで「--with-brotli=/usr/local 」を追加

## apacheの設定
extra/httpd-ssl.confに以下を追加
```
SetOutputFilter BROTLI_COMPRESS
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-brotli

BrotliCompressionQuality 5
BrotliCompressionWindow 18

BrotliFilterNote Input instream
BrotliFilterNote Output outstream
BrotliFilterNote Ratio ratio
```

# 動作確認
chromeのDevelopers Toolの「ネットワーク」でレスポンスヘッダを確認する。
適用されていれば、以下のように表示される。
```
content-encoding: br
```
:::note warn
レスポンスヘッダに「content-encoding: br」がなく、「x-content-encoding-over-network: br」がある場合は、クライアントのアンチウイルスソフトが影響しているとのこと。
アンチウイルスソフトを一時停止して、再度確認したら表示された。
VSCodeをPhpStormから移行したときに設定したミニメモ

PhpStormを使っていたが、値上げして「高い！無理！」となったので、VSCodeに乗り換えることに。
VSCodeでも使い勝手いいようにしたい。
※OSはMacを使っております。

# 1. まず本で自分のほしい機能をピックアップ
この本を購入して、日本語化などもろもろ設定。
Pritterの使い方も分かりやすくて、参考になりました。
[Visual Studio Code完全入門紹介記事](https://coliss.com/articles/book-review/isbn-9784295013457.html)

# 2. PhpStormので使っていた機能を ~~入れる~~ 探す
ほしい機能はプラグイン入れるのかなと思ってたら、ほぼ既に入ってた。
今思えば、大してPhpStorm使いこなせてなかったのかも...。

## 自動保存の設定
検索すると設定項目に`Files:Auto Save`があると知って、検索してみつけた！

## Shift 2回押すとでてきた　検索窓
`Command + p` 「（ファイルに移動）がもともとVSCodeにあったのでそれを覚えることにする。

## ファイルDiff機能
[これももともと搭載されていた！ちょっと使い勝手が違うけど。](https://atmarkit.itmedia.co.jp/ait/articles/1806/08/news028.html)
クリップボードの比較もあるとのこと。

`Command + Shift + p` でコマンドパレットを出す
`Compare`と入力してファイルを選ぶ

## 行移動
`Ctrl + G` でテキストエリアがでてくるので、数字入れてその行にジャンプ

## エディター内でターミナル
一番上のメニューの中に、「ターミナル」がある！
「ターミナル＞新しいターミナル」

## ローカル履歴
これも標準搭載！
エクスプローラーパネルの「タイムライン」ですぐ見れるとのこと！


## TODOの表示
[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)
コメントアウトで `TODO` と書いておくと、一番左のメニューにアイコンが増えて、TODO一覧を表示してくれる！

## 行複製ショートカット
PhpStormは確か `Command + D` だったが、
VSCodeは `Option(Alt) + Shift + ↑ or ↓` とのこと。 


# 3. WordPressで便利な拡張機能を追加で入れる

* [WPスニペット](https://marketplace.visualstudio.com/items?itemName=wordpresstoolbox.wordpress-toolbox)
* [PHP](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)


# おわりに
これからも、他にも便利なプラグインがたくさん出ているので色々見てみたいのと、
Pritterとかを使いこなして、色々自動化して使いやすくしたいです。

## 参考にさせていただいた記事

* [【Web制作向け】VSCodeおすすめプラグイン・拡張機能と設定一覧【超快適】](https://shogo-log.com/vscode/)
* [エディターの自動保存の設定](https://www.javadrive.jp/vscode/setting/index2.html)
* [Visual Studio Codeでローカル編集履歴がたどれるようになったぞ！](https://qiita.com/kihaya-tech/items/5973616a15f253226ad7)
omniauth の twitter ログインでプロフィール画像とかが持ってこれない問題

# twitter ログインでプロフィール画像とかが持ってこれない問題

twitter ログインを実装するとプロフィール画像とかを取得することができる

でも、実際に omniauth gem とか使ってみて値を見てみると画像の URL が入っていなかった

## 原因

権限が足りない
プロフィールとかの情報を持ってきたいなら追加で申請が必要なのでそれをする


権限の確認
1. Developer Portal のサイドバーから Twiitter API v2 をクリック
2. Elevated のタブをクリック
3. 青枠で囲んだ部分から Elevated access を付与されているプロジェクトを確認できる

![Screen Shot 2023-01-02 at 16.48.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/516893/7821d706-0260-ec22-557f-c54006aa4c68.png)

ここで Elevated access を付与されてるよ！みたいに表示されていないのなら追加で申請が必要

👇こういうのを参考にして申請した。あとはDeepLとか使いながら。
わりとちゃっと申請通してくれるのでとりあえず送ってみると良きかと

https://lemon818.com/twitter-api/

## 追記

Elevated access を得るとプロフィール画像の他に、プロフィールの文章とかフォロー数とかフォロワー数とか色々とれるようになるよ
表の結合を用いたデータの抽出

# ビューの作り方
```
CREATE VIEW ビュー名　(ビューの列名１,ビューの列名２,....)
AS
<SELECT文>
```
```AS```キーワードの後には```SELECT```文を記述します。
```SELECT```文の列とビューの列は並び順で一致し、```SELECT```文の最初の列はビューの１番目の列、```SELECT```文の２番目の列はビューの２番目の列に、なります。

# LIKE述語
```=```を使うと
文字が完全に一致する場合にしか真にはなりません。

### ```%```
```LIKE```述語は部分一致検索を行うときに使う。
文字列dddで共通する文字列は
```ddd%```は前方一致
```%ddd```は後方一致
```%ddd%```は中間一致

### ```_```
```%```と同じ役割をしているが```アンダーバーは文字数を指定```できる。
```_```一個で1文字分を指す。
3文字の場合は、```___```になる。

# 出典
https://www.shoeisha.co.jp/book/detail/9784798144450

# COUNT関数
テーブルのレコード数(行数）を数える。

```COUNT(*)```とすると```nullを数えてしまう```。
しかし
```COUNT(col_1)```など列目を引数にすると```nullを除外して数える```ことができる。

# 出典
https://www.shoeisha.co.jp/book/detail/9784798144450

https://gihyo.jp/book/2022/978-4-297-12377-2
【Git】Untracked filesの意味と対応方法について。git cleanで解決する！

# 概要
* `git add`した時に、以下メッセージが返されることがあったので、その対応方法をメモしておきます。

```terminal
Untracked files
(use "git add ..." to include in what will be committed)
```

# Untracked filesの意味・対応方法
* Untracked filesとは、未追跡のファイルという意味。「ステージング（git add）していない新しいファイルがあるぞ」ということです。

* アトラシアンのgitチュートリアルである[Git Clean | Atlassian Git Tutorial](https://www.atlassian.com/ja/git/tutorials/undoing-changes/git-clean)には、以下のように記載されています。

>Untracked files are files that have been created within your repo's working directory but have not yet been added to the repository's tracking index using the git add command.

* 自分の場合は、不要なファイルで、削除したい！という趣旨だったので、以下コマンドで解決できます。
    * `git clean -n`　で内容をチェック
    * `git clean -f`　で削除
【Android】実質たった３行でCloud Storageに画像をアップロードする方法

# この記事で紹介する内容

今回は、Androidアプリで画像をアップロードする機能を実装したい方向けに、Firebaseを使えば簡単に画像アップロード機能を実装できることを紹介したいと思います。

具体的にいうと、この記事を読めば、**実質たった３行のコード**を書くだけで、画像を含めたファイルのアップロード機能を作成することができるようになります。

この記事を読んだ後に、「なんだ、Firebaseってめっちゃ使いやすいじゃいないか」と思っていただいた方にはFirebaseの公式ドキュメントをご一読いただき、その機能の豊富さとシンプルさに是非驚いていただけると幸いです。

https://firebase.google.com/docs/storage/android/start#kotlin+ktx

# 依存関係を追加する

Cloud Storageライブラリの依存関係を追加します。

そのために、以下の内容をbuild.gradleのdependenciesに追加してください。

```gradle
implementation platform('com.google.firebase:firebase-bom:31.1.1')
implementation 'com.google.firebase:firebase-storage-ktx'
```

# Cloud Storageにアップロードする

**Cloud Storage**にファイルをアップロードする場合は、次のように実質たった3行のコードを書くだけで、Androidアプリでアップロード機能を実装することができます。

```kotlin
val storage = Firebase.storage
val ref = storage.reference.child(filePath)
ref.putFile(fileUri).await()
```

**Hilt**を使ったコンストラクタインジェクションを使って`storage`を取得する場合は、次のような実装をクラスを作成してみてください。

```kotlin
class StorageServiceImpl @Inject constructor(
    private val storage: FirebaseStorage
) : StorageService {
    override suspend fun upload(fileUri: Uri, filePath: String): UploadTask.TaskSnapshot {
        val ref = storage.reference.child(filePath)
        return ref.putFile(fileUri).await()
    }
}
```

## StorageReferenceの取得

`FirebaseStorage`のインスタンスに対して`reference.child()`を呼び出して、`StorageReference`インスタンスを作成します。

```kotlin
val reference = storage.reference.child(filePath)
```

この時`child()`に渡す値は、Cloud Storage上のパスを表します。
例えば、画像ファイルをアップロードする際は次のようになると思います。

```kotlin
val filePath = "images/$fileName"
```

## putFile()に渡すUriを取得する方法

そして、`StorageReference`インスタンスに対して、`putFile()`を呼び出します。この`putFile()`に対して`Uri`型の値を渡せば良いので、`rememberLauncherForActivityResult()`の呼び出しによって取得した値を渡すと簡単に画像をアップロードできます。

`rememberLauncherForActivityResult()`の詳細については、こちらの記事をご参照ください。

https://qiita.com/takagimeow/items/2f99435682f90cde0055

# まとめ

タイトルでは、実質たった３行で・・・と書きましたが、`FirebaseStorage`のインスタンスの取得を除けば、**実質たった２行**で画像をアップロードする機能を実装できます。

```kotlin
val ref = storage.reference.child(filePath)
ref.putFile(fileUri).await()
```

この簡潔さを、既存のAndroidプロジェクトにFirebaseを導入することによって、ぜひ体験していただくことをおすすめします！

# 参考にした記事

https://stackoverflow.com/questions/61610024/how-to-upload-an-image-to-firebase-storage-using-kotlin-in-android-q

https://www.geeksforgeeks.org/android-upload-an-image-on-firebase-storage-with-kotlin/

https://firebase.google.com/docs/storage/android/upload-files
【卒研⓪】最低限Quiitaを使うために

# 目的
Quiitaの使い方を**最低限**習得するためです。
あと、書いて覚えようと思ったので、書きます。

詳しく知りたい人は、これ👇とかどうぞ～<br>
>- [【書き方まとめ】初めてQiitaに記事を書くときに知っておくべきこと](https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce)
>- [Qiita 初心者向け書き方まとめ](https://qiita.com/ryu3/items/27e77aa35e44f8926933#%E8%A6%8B%E5%87%BA%E3%81%971)
>- [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
# 超最低限
これだけでなんとかなる多分

#### (1) 見出しの書き方
```
# 見出しにしたいテキスト
```
「**#**」の数で大きさが若干変わります。
注）「#」の後ろは半角スペースがいります。
<br>

>```:例
># 見出し「#」
>## 見出し「##」
>### 見出し「###」
>#### 見出し「####」
>```
># 見出し「#」
>## 見出し「##」
>### 見出し「###」
>#### 見出し「####」

こんな感じですね。
注）アンダーラインは「##」までみたいです。

#### (2) 本文の書き方
```
本文にしたいテキスト
```
普通に書いたらいけます。

#### (３) コード文の書き方（黒背景の仕方）
```
    ```
    表示させたいコード、テキスト
    ```
```
「**```**」で表示させたいコード、テキストを挟む。

これは知ってて損せんやつ → [枠上部のタブの表示・コードに色付けする方法](https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce#%EF%BC%93%E6%9E%A0%E4%B8%8A%E9%83%A8%E3%81%AE%E3%82%BF%E3%83%96)

#### (4) 強調させる
```
**強調させたいテキスト**
__強調させたいテキスト__
```
**強調させたいテキスト**
__強調させたいテキスト__

２つ書き方があるけど、多分どっちでもいいです。

#### (5) リンクを貼る
```
[テキスト](URL)
```
「**[]**」でリンクを貼りたい文字（タイトル）を囲んで、「**()**」で飛びたいリンク先を囲むとできます。
>```:例
>[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
>```
>[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

こんな感じです。

## ステップアップ
必要やけど、無くてもなんやかんやいける気がする。
#### (6) 箇条書きをする（番号なし）
```
- 箇条書き１
- 箇条書き２
- 箇条書き３
```
冒頭に「**-**」を付ける。
ちなみに、「*」「+」を「-」の代わりで付けてもいけるみたいです。
注）ハイフンの後ろは半角スペースがいります。

>```:例
>- ああああ
>- いいいい
>- うううう
>```
>- ああああ
>- いいいい
>- うううう

こんな感じです。

#### (7) 箇条書きをする（番号あり）
```
1. 箇条書き１
2. 箇条書き２
3. 箇条書き３
```
冒頭に「**数字.**」を付ける。
注）ドットの後ろは半角スペースがい。

>```:例
>1. ああああ
>2. いいいい
>3. うううう
>```
>1. ああああ
>2. いいいい
>3. うううう

こんな感じです。

#### (8) 画像の挿入
画像をドラッグ＆ドロップでいけます。
これは知ってて損せんやつ → [外部サイトの画像を埋め込む方法](https://qiita.com/shizen-shin/items/a997bc228fa2850c9fce#%EF%BC%99%E7%94%BB%E5%83%8F%E3%81%AE%E5%9F%8B%E3%82%81%E8%BE%BC%E3%81%BF%E5%A4%96%E9%83%A8%E3%82%B5%E3%82%A4%E3%83%88)

#### (9) グレーの棒を表示するやつ

```
>表示したいテキスト
```
冒頭に「**>**」を付けると表示できる。
>```:例
> >ああああ
> >いいいい
> >うううう
>```
> >ああああ
> >いいいい
> >うううう

こんな感じです。
ちなみに、例みたいに入れ子できます。

#### (10) 改行や空白
```
<br>
```
**１行**の改行なら、「**brタグ**」「**半角スペース2個**」「**Enterキー**」三種類の改行があります。好きなのをどうぞ。でも、**2行以上**の改行(空白行の挿入)は、「**brタグ**」でしかできない。
<br><br><br><br><br><br><br><br>こんな感じです。

## 最後に
これだけあれば多分大丈夫な気がします。
他にも沢山機能があるので、気になったら調べてください:v::slight_smile: :thumbsup:

※ 初心者が書いているので間違っている場合があります。
Next.jsエンジニアがFlutterを触ってみた

## 背景
みんな大好きフロントエンジニアロードマップの2023年版が公開されたようです。Flutterにチェックマークがついていたので、さっそく触ってみました。自分がどう理解を進めたのかの記事です。

https://roadmap.sh/frontend


（補足）もはや説明不要かもしれませんが、誤解を恐れずに言えば、Flutterとは、iOS/Android/WebAppを一つのコードで作成できるフレームワークとビルドツールのセットだと思われます。Next.js的な立ち位置だと考えています。また、言語はDartというものですが、個人的には、JavaScriptやKotlinに近く馴染みやすさを感じました。

## 準備
まずは公式の通りに「Install」から「Test drive」まで進めました。

https://docs.flutter.dev/get-started/install

ここの状態だとコードの理解が難しくなってしまうので、以下のようにコードを切り分けました。

- lib/
    - components/
        - component.dart: ページで使うためのコンポーネント
    - pages/
        - home.dart: Next.jsでいう「ページ」
    - main.dart: Next.jsでいう_app.tsxに該当するファイル

中身はこんな感じにしました。

```dart
// main.dart
// Next.jsだと、_app.tsxに該当するファイル
import 'package:flutter/material.dart';
import 'package:my_flutter_app/pages/home.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // これで、URLによってコンポーネントを切り替えられる
      routes: {
        '/': (context) => const HomePage()
      },
    );
  }
}
```

```dart
import 'package:flutter/material.dart';
import 'package:my_flutter_app/components/component.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // アプリのひな型を作るためのScaffold
    return Scaffold(
        appBar: AppBar(
          title: const Text("Home"),
        ),
        body: const Center(child: Component()));
  }
}
```

```dart
import 'package:flutter/material.dart';

class Component extends StatelessWidget {
  const Component({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text("Hello World");
  }
}
```

だいぶNext.jsぽくなりました。



## 起動

```
flutter run
```

からchromeを選んで実行してみました。

![スクリーンショット 2023-01-02 152737.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/141888/3b504845-31f3-aab5-86e9-59b91f27c48b.png)

## まとめと感想
FlutterやDartと聞くと手が出しづらいように思いましたが、Statlessであれば大して怖くなかったです。

もしかしたらFlutterのお作法としてよくないのかもしれませんが、Next.jsと同じようにしてやればNext.jsと同じような考え方で理解できそうな気がしました。

## 今後の展望
今回はStatelessWidgetしか使っていないので、値が変化したり、fetchしたり、いわゆるステートフルな動的なアプリケーションには対応できていません。これに対応するためにはStatefulWidgetを使えばよいのですが、Next.jsエンジニアに馴染のあるReact Hooksのように書けるflutter_hooksを使ってみようと思います。

https://pub.dev/packages/flutter_hooks
2進数を感覚的に覚えれる！？

# 視覚的に1は左に移動する
|　10　|2|
|:-:|:-:|
|2|０００１|
|4|００１０|
|8|０１００|
|16|１０００|

# とりあえず横に並べる
|1|2|4|8|
|:-:|:-:|:-:|:-:|
|０００１|００１０|０１００|１０００|

# 1が増えていく
|　10　|2|　10　|2|
|:-:|:-:|:-:|:-:|
|1|０００１|8|１０００|
|3|００１１|12|１１００|
|7|０１１１|14|１１１０|
|15|１１１１|15|１１１１|

# 合体させてみた
|1|2|4|8|
|:-:|:-:|:-:|:-:|
|０００１|００１０|０１００|１０００|
|3|||12|
|7|||14|
|15|||15|

|1|2|4|8|
|:-:|:-:|:-:|:-:|
|０００１|００１０|０１００|１０００|
|００１１|||１１００|
|０１１１|||１１１０|
|１１１１|||１１１１|

||1|2|4|8||
|:-:|:-:|:-:|:-:|:-:|:-:|
|1|０００１|００１０|０１００|１０００|8|
|3|００１１|||１１００|12|
|7|０１１１|||１１１０|14|
|15|１１１１|||１１１１|15|


# 6と7も覚えやすそう・・・
||1|2|4|8||
|:-:|:-:|:-:|:-:|:-:|:-:|
|１|０００１|００１０|０１００|１０００|8|
|3|００１１||６|１１００|12|
|7|０１１１||７|１１１０|14|
|15|１１１１|||１１１１|15|

||1|2|4|8||
|:-:|:-:|:-:|:-:|:-:|:-:|
|１|０００１|００１０|０１００|１０００|8|
|3|００１１||０１１０|１１００|12|
|7|０１１１||０１１１|１１１０|14|
|15|１１１１|||１１１１|15|

# 残り5,9,10,11,13
:::note info
10と11は個人的に覚えやすい
10進数の10
11進数の11
みたいな感じで覚えれる
|　10進数　|2進数|
|:-:|:-:|
|10|１０１０|
|11|１０１１|
:::

:::note warn
5,9も感覚的に覚えた
2は10の位に1
5は100の位に1
9は1000の位に1

|　10進数　|2進数|
|:-:|:-:|
|2|００１１|
|5|０１０１|
|9|１００１|
:::

:::note alert
13だけは何となく仲間外れになっちゃったので覚えれそう
|　10進数　|2進数|
|:-:|:-:|
|13|１１０１|
:::

# まとめ
||1|2|4|8||
|:-:|:-:|:-:|:-:|:-:|:-:|
|１|０００１|００１０|０１００|１０００|8|
|3|００１１||０１１０|１１００|12|
|7|０１１１||０１１１|１１１０|14|
|15|１１１１|||１１１１|15|

|　10進数　|2進数|
|:-:|:-:|
|2|００１１|
|5|０１０１|
|9|１００１|

|　10進数　|2進数|
|:-:|:-:|
|10|１０１０|
|11|１０１１|

|　10進数　|2進数|
|:-:|:-:|
|13|１１０１|

> まぁ普通に覚えた方が早いかもしれんが、年始のいい暇つぶしなったかも
テーブルの足し算引き算

## 集合とは？
データベースの世界においての集合とは、```レコードの集合```を表す。
```テーブル```も```ビュー```や```クエリの実行結果```も集合という。

## ビューとは?
ビュー【DB】（英：view【DB】）とは
元々あるテーブルから任意のデータを取り出したり組み合わせたりして作った```仮想的なテーブル```とか説明される場合もありますが、身も蓋もないことを書くと
```select文に付けた、あだ名```です。

### 出典
https://wa3.i-3-i.info/word17908.html#:~:text=%E3%83%93%E3%83%A5%E3%83%BC%E3%80%90DB%E3%80%91%EF%BC%88%E8%8B%B1,%E3%81%A7%E3%81%99%E3%80%82

## UNIONとは？
```レコードの足し算を行う```演算子。

### 注意点
* 集合演算子は通常は```重複行が排除```されます。
* 演算対象となる```レコードの列数は同じ```なこと
* 足し算の対象となる```レコードの列のデータ型が一致```すること
* ```ORDER BY句は最後に一つだけ```

### ALLオプション
UNIONの結果から重複行を排除しない構文。
UNIONの後ろに```ALL```とうキーワードを追加するだけ。
```
UNION ALL
```

## INTERSECTとは？
```テーブルの共通部分```の選択する。
ALLオプションで```重複部分```を表示させる。

## EXCEPT
レコードの引き算を行う。

### 注意点
どちらがどちらを引くかで結果が変わってくる。
前後に注意。

## 出典
https://www.shoeisha.co.jp/book/detail/9784798144450
Windows 11 22H2 で QTTabBar がアンインストールできない問題の解決方法

Win 11 22H2 では、エクスプローラーにおいて QTTabBar のようなタブ機能が標準でサポートされました。なので QTTabBar をアンインストールしようと思いましたが、エラーが出て失敗しました。その場合の対処法です。
## 試していないが、手っ取り早く出来るかもしれない方法。もしできたら是非報告をください。
- Win 11 22H2 上で、
- QTTabBar.exe を起動し、Install (Restoreだったかも) にチェックを入れて（最初から入っている）、インストールし直す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706245/6a389a76-ddb0-1d29-3e29-199ce1e8154e.png)
- もう一度 QTTabBar.exe を起動し、今度は Uninstall のほうにチェックを入れてアンインストール。

## 私がやった方法
- Win 11 22H2 をダウングレードする。
    - 設定 → Windows Update → 詳細オプション → 回復 → 復元 からできます。
- Win 11 22H1 上で、
- （あとは上と一緒です）QTTabBar.exe を起動し、Install (Restoreだったかも) にチェックを入れて（最初から入っている）、インストールし直す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2706245/6a389a76-ddb0-1d29-3e29-199ce1e8154e.png)
- もう一度 QTTabBar.exe を起動し、今度は Uninstall のほうにチェックを入れてアンインストール。

## 経緯（読まなくていい）
私は、アンインストールできないのは 22H2 の新機能が QTTabBar に影響しているせいだと思ったのでさっさと 22H1 にダウングレードしてしまいましたが、22H1 でアンインストールしようとしても 22H2 でアンインストールしようとしたときと同じエラーが出ました。この仕組みはよく分かりませんが、結局インストールし直したらそのエラーが起きませんでしたので、もしかしたら 22H2 で同じことをやれば行けたかも？と思ったので、先に書いた方法を書かせていただきました。

しかし、恐らく 22H2 の機能が QTTabBar のインストレーションに干渉して失敗するのではと思っています。分かりませんが。報告ください。
pdfcropでOperation not permittedが発生する場合の修正方法

## 概要

Windows OSにて，pdfcropを使用するとき `Operation not permitted` とのエラーが発生する場合の修正方法を示す．

## 注意事項

本文書の作成者は，Perlについてまったく知らない．本文書に書かれた情報を参考にする場合は，自己責任で実行されたい．

## 環境

- Windows 10 Pro 22H2
- TeX Live 2022
- pdfcrop 1.40
- 次の方法でインストールした：[TeX Liveのインストール](https://muneue-suwa.github.io/my-site-prototype/docs/tex/texlive2021)

## 具体的な症状

以下のようなエラーが発生する．

```poewrshell:powershell
> pdfcrop.exe .\figures.pdf
PDFCROP 1.40, 2020/06/06 - Copyright (c) 2002-2020 by Heiko Oberdiek, Oberdiek Package Support Group.
!!! Error: Link from `.\figures.pdf' to `tmp-pdfcrop-25824-img.pdf' failed (Operation not permitted/クライアントは要求された特権を保有していません。)!
C:\texlive\2022\bin\win32\runscript.tlu:915: command failed with exit code 2:
perl.exe c:\texlive\2022\texmf-dist\scripts\pdfcrop\pdfcrop.pl .\figures.pdf 
```

## 手っ取り早く修正する方法

`pdfcrop.pl` にWindowsで発生するバグがあるようである．修正版を作成したため，[このリンク](https://raw.githubusercontent.com/muneue-suwa/pdfcrop/master/pdfcrop.pl)から `pdfcrop.pl` をダウンロードして， `C:\texlive\2022\texmf-dist\scripts\pdfcrop` に保存する．既存の `pdfcrop.pl` は念のためバックアップしておくことを推奨する．

TeX Liveのバージョンが2022でない場合，そのバージョンにあわせて保存してすること．例えば2021の場合は， `C:\texlive\2021\texmf-dist\scripts\pdfcrop` となる．

TeX Liveのインストール先が `C:\texlive` でない人もいるかもしれないが，そのときは適宜対応されたい．

## 原因と具体的な変更内容

変換時に一時ファイルを作成するようであるが，これをシンボリックリンクで作成すること (`symlink`) がエラーの原因のようである．Windows OSにてシンボリックリンクを作成するには管理者権限を要するため，パーミッションエラーが発生する．

`pdfcrop.pl` の701行目あたりを見ると， `$symlink_exists` で `symlink` が使用できるか判定して，不可能な場合は `else` 内の `copy` を実行しようとしているように見えるが，なぜかWindows OSだと動作していない．そのため，Windows OSで使用していることが判定された場合は， `else` に移行するようにする．具体的には， `pdfcrop.pl` の上のほう（l.124行目あたり）で，Windows OSと判定されたときは， `$Win = 1` となるためこれを利用する．

```diff_perl:pdfcrop.pl
my $symlink_exists = eval {
    local $SIG{'__DIE__'};
    symlink("", "");
    1;
};
print "* Input file name `$inputfile' contains special characters.\n"
      . "* " . ($symlink_exists ? "Link" : "Copy")
      . " input file to temporary file `$inputfilesafe'.\n"
        if $::opt_verbose;
- if ($symlink_exists) {
+ if (not $Win and $symlink_exists) {
    symlink($inputfile, $inputfilesafe)
        or die sprintf "$Error Link from `%s' to `%s' failed (%s)!\n",
                       $inputfile, $inputfilesafe, exterr;
}
else {
    use File::Copy;
    copy($inputfile, $inputfilesafe)
            or die sprintf "$Error Copy from `%s' to `%s' failed (%s)\n",
                           $inputfile, $inputfilesafe, exterr;
}
```

## その他

上の内容については，[プルリク](https://github.com/ho-tex/pdfcrop/pull/16)を送ってあります．
JavaScriptでのCookieの使い方


## １．概要
Cookieとはブラウザに保存できるテキストデータのことで、この機能を使うことでサイト上で行った設定などを引き継ぐことができたりします。今回は最近私が作った瞑想タイマーというアプリを元に、JavaScriptにおけるCookieの使い方をご紹介いたします。
## ２．実際の使用イメージ
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704639/487c29dc-00d4-8358-33c5-47dd9c837fa0.png" width="300">

瞑想タイマーの設定として、毎回５分の瞑想をBGMなしで行いたいとします。ブラウザを開くたびにいちいち設定するのは面倒なので、数日間は再度サイトを開いた際にも設定が維持されていると楽ですよね。そこでCookieの出番となります。
```jsx
//BGMの有無を３日間保存
document.cookie = 'bgmcheck=1;max-age=259200;';
//上からそれぞれ時間、分、秒を３日間保存
document.cookie = 'hournum=' + hournum + ';max-age=259200;';
document.cookie = 'minutenum=' + minutenum + ';max-age=259200;';
document.cookie = 'secondnum=' + secondnum + ';max-age=259200;';
```

document.cookieプロパティでクッキーを設定します。

上記のbgmcheck=1の部分 はBGMなし、「hournum」「minutenum」「secondnum」の部分は、それぞれ時、分、秒の時間の設定を引き継ぐために記述したものです。ちなみに例として上げると、「’minutenum=’ +」の後にある変数minutenumには何分かの値が入っています。上にある使用イメージ画像で表示されている設定の場合は5の値が入っていることになります。

後半のmax-age=259200というのは３日を秒数で表したもので、Cookieの保存期間を設定しています。
## ３．保存したCookieの読み取り方
読み取りの際もdocument.cookieプロパティを使います。
```jsx
//読み込んだCookieを変数に格納
let cookie = document.cookie;
```
しかしこうして取得したCookieがそのまま使えるかというと、難しい問題があります。変数cookieの中身をconsole.logで確認してみるとわかると思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704639/ff124fd9-f505-01f4-ec1b-b4db6f1f5f9b.png" width="300">

Cookieはテキストデータなので、このままでは配列のように便利にデータとして使うことが難しいです。そこで変数cookieの中身を配列に変換することにします。
```jsx
//読み込んだCookieを変数に格納
let cookie = document.cookie;

//;を起点にcookieを配列に分割
let cookieArray = cookie.split(';');
//配列の保存用
let saveDate = [];

for(let i = 0;i < cookieArray.length;i++){
    //余分な空白を削除する
    cookieArray[i] = cookieArray[i].trim();
    //cookieArrayの配列を=を起点に分割し、saveDate[i][0]とsaveDate[i][1]に格納する
    saveDate[i] = cookieArray[i].split('=');
}
```
変数saveDateをconsole.logで確認するとこのような配列になっています。これで大分使いやすくなったと思います。あとは数値に変換するなり自分の使いやすいように、初期設定に反映させていけば良いと思います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/704639/d21796e5-f387-e5ec-678e-da9825ea51b5.png" width="300">

## ４．おわりに
いかがでしたでしょうか。私も自分が作ったアプリやゲームなど、データを一時的に保存しておけるCookieの力が必要になる局面が結構ありまして、最近学んだことを共有する形で記事を書かせていただきました。初学者のため至らぬ点など多々あると思いますが、記事に対してご意見・ご感想頂けますと幸いです。

<a href="https://yusukecode.com/meditation-timer/">今回サンプルとして使った瞑想タイマーはこちら</a>
ansible-playbookでcronの設定をおこなう

## はじめに
crontabの設定を実施するansible-playbookです
取り急ぎスクリプトを定期実行させたい場合を想定しています
異常時はreturn codeで判別することにして、cronのログにreturn codeを出力させます

## 前提
ansible-playbookの簡単な使い方はわかる前提で記載しています
- 環境
	- Ubuntu 20.04

## ファイル構成
```
L group_vars
    - cron_server.yml
- cron_server_playbook.yml
- hosts
```

## group_vars/cron_server.yml  
以下の2つの設定を書いています  
- rsyslogの設定でcronのログを出力する設定
- return codeが0以外のときにログに出力するためにログレベルの記載
```yaml
---
# /etc/rsyslog.d/50-default.conf
default_conf_50: 
        - parameter: "#cron"
          value: "cron.*                           /var/log/cron.log"
# /etc/default/cron
cron_loglevel: "EXTRA_OPTS='-L 15'"
```

## hosts
IPアドレスは導入するサーバの値を指定します
```yaml
[cron_server]
aaa.bbb.ccc.ddd
```

## cron_server_playbook.yml
やっていることは、以下の3つです
- rsyslogの設定を変更しcron実行時のログを出力させ、rsyslogサービスを再起動
- 出力するログレベルを設定、crontabを再起動
- crontabに１日1回のジョブと5分間隔のジョブを登録する(crontab -e 相当の操作)
```yaml
- name: crontab configure
  hosts: cron_server
  tasks:
    - name: configure rsyslog
      become: true
      lineinfile:
        dest: "/etc/rsyslog.d/50-default.conf"
        line: "{{ item.value }}"
        regexp: "^{{ item.parameter }}"
        create: yes
      loop: "{{ default_conf_50 }}"
      loop_control:
        label: "{{ item.parameter }}"
    - name: restart rsyslog
      become: true
      systemd:
        name: rsyslog
        state: restarted
        enabled: yes
    - name: configure cron logging
      become: true
      lineinfile:
        dest: "/etc/default/cron"
        line: "{{ cron_loglevel }}"
    - name: restart crontab
      become: true
      systemd:
        name: cron
        state: restarted
        enabled: yes
    - name: setting crontab(daily)
      cron:
        name: "cron_name"
        user: "ubuntu"
        minute: "15"
        hour: "01"
        job: "echo abc"
    - name: setting crontab(5m interval)
      cron:
        name: "cron_name"
        user: "ubuntu"
        minute: "*/5"
        job: "echo abcdefg"
```

## おわりに
説明不足だと思いますので不明な点があればコメントいただければわかる範囲で追記します
LPIC201リソース測定コマンドまとめ

# 記事を書く動機
Ping-tで同じ問題を何度もミスするので、頭の中を整理するため/自分で見返すため。
今回はリソース測定に限った記載をしています。その他の項目は一旦考慮外としています。


# 各リソース毎の表示項目
・CPU
システム全体のCPU使用率
プロセス毎のCPU使用率
負荷平均

・物理メモリ
システム全体の物理メモリ使用状況
プロセス毎の物理メモリの使用率

・スワップ領域
スワップ領域の使用状況
スワップイン/アウトの状況

・その他
ディスクIO
NW IO
プロセスのPID

# topコマンド
CPU,物理メモリの全項目＋スワップ領域の使用状況
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/74a3939c-f47b-d317-046c-a2005bc80e4e.png)


# wコマンド
CPU負荷平均のみ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/52a5a325-c6ba-599b-ab49-e1411dd3d840.png)


# uptimeコマンド
CPU負荷平均のみ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/775f3c5e-f2aa-bd92-3f01-38c859bfe3e4.png)

# vmstatコマンド
システム全体CPU,物理メモリ,スワップ領域使用率＋ディスクIO
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/d577fdb6-7814-7dac-6ef4-10a4c16d4c4b.png)

# iostatコマンド
システム全体CPU使用率,ディスクIO
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/2f5450c6-32f4-9428-c29c-1fc74e7907e5.png)

# mpstatコマンド
システム全体CPU使用率のみ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/652aa7c5-eefe-de4a-2c5e-472b63d89586.png)

# ps uコマンド
プロセス毎のCPU,物理メモリ使用率
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/e9fdafe8-245c-fd5a-5713-6a2640f0736b.png)

# freeコマンド
システム全体の物理メモリ,スワップ領域使用率
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921210/5732b233-fa63-75c9-c427-bb0068e9313f.png)

# sarコマンド
必要であれば別途まとめようと思っていますが、-rでシステム全体物理メモリ、-Sでスワップ領域の使用状況を表示できます。-rでスワップ領域は表示されないということに注意。
sarコマンドはオプションが割とわかりやすいので、スクショは無しで。

# swapon -sコマンド
スワップ領域の使用状況
これもノースクショで。

# 余談
この記事の執筆中、macのターミナルからmac内のVM(ubuntu)へのssh接続ができなくなりました。10分ぐらい悩んでしまいましたが、結果macbookの設定でfirewallをオンにしたことが原因でした。
LPIC102でやったはずのネットワークコマンドなどが何も生きず、試験勉強前と変わらずgoogleに訊いて解決するだけでした。やっぱり資格だけではダメだと改めて感じました。
ただ、こうやって実際に調べたりしていく際の定着スピードには差が出てくると思います。「試験でやったあの話は実際にこういう場面で使うのか」と思えることで、座学の知識が実技の能力へと繋がるはずです。

# 記事を書いてみて
Ping-tで問題を解くより、かなり気楽にできるので息抜きに良いですね。ただ、スクショを載せていると時間を使ってしまうので、その辺は考えながら書いていきたいです。
今回はほぼ全コマンドのスクショを載せましたが、どの程度あった方が良いのか考えながら今後の記事を書いていきたいです。
'NoneType' object has no attributeって言われるけど逆に何の属性があるの？

実験
```python
>>> dir(object())
['__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__getstate__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__']
>>> dir(None)
['__bool__', '__class__', '__delattr__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__getstate__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__']
```

**__bool__があった**

```python
>>> None.__bool__()
False
```

Falseを返す

終わり。

ちなみに`id(None)`をいくらしても同じidが返ってくる
Anacondaが何か調べた。

Anacondaとは。
=

毎度のことながらとりあえずwikipediaを調べたところ、
「Anaconda は、科学技術計算のためのプログラミング言語 Python と R のディストリビューションで、パッケージの管理と配備を簡素化することを目的としています。このディストリビューションには、Windows、Linux、macOSに適したデータサイエンス用パッケージが含まれています。」

だそうです。まず最初の疑問が、
ディストリビューションって何？ってことですね。

調べてみたところディストリビューションとはまとめフォルダ、みたいな感じです。
用途ごとに必要なライブラリ(numpy, pandas等)であったり、IDE(開発環境、Spyder, Jupyter Notebookなど)をまとめてくれてるのがディストリビューション、みたいです。

その中でAnacondaはpythonとRのデータサイエンスに特化したライブラリなどを200以上まとめてくれてるありがたいディストリビューションみたいです。

さらにはAnacondaをインストールするとはcondaといわれるパッケージマネージャーがついてきます。

パッケージマネージャーとはその名の通りパッケージをマネージ(管理)するためのツールです。
ではパッケージとは？
簡単な話、pythonのモジュール(.pyファイル)を複数まとめたものになります。

つまり
.pyファイル=
モジュール
をたくさんまとめたもの=
パッケージ
を管理するツール=
パッケージマネージャー

でそんなパッケージマネージャーの一つにcondaがあるってことです。
condaの特徴とかは今度まとめようかなと思ってます。

もし間違い等あればコメントで指摘していただけると助かります🙇‍♂️

ではおつれい。
プログラミング初心者へ：エラーが出た時の対処法

プログラミング初心者の方は、エラーが出た時に対処できるかで、その後、勉強を続けられるかが決まると思います。
![インスタスライド_202212316.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/ba3bd9cb-2048-0a51-159a-1943d762cc1a.gif)


プログラミングしていてエラーが出て解決しない。投げ出す前の対処法を記事にしました。
![スクリーンショット 2023-01-02 14.18.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/b5820068-c3d0-8466-db35-221faa72fbe7.png)


# その１
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/ce013871-2c71-1699-0881-0bba19f93778.png)
Stackoverflow

エンジニアで知らない人がいないサイトです。ググったら必ず出てきます。日本語サイトもあります。
https://ja.stackoverflow.com/

# その２
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/23130/d5dd310e-c822-c007-65f4-6ab61786c681.png)

teratail
こちらもエンジニアの皆さんがよく知ってるサイトです。
https://teratail.com/

# その３
Google翻訳
https://translate.google.co.jp/?hl=ja

エラーメッセージが英語なので呼んでない人いませんか？
意外に簡単な英語だし、ちゃんと問題部分を説明してくれています。

# まとめ
皆んな困ったら検索したり人に聞いたりしています。
怖がらずに投稿してみましょう。教えるのが好きな人も沢山います。

# 最後に
未経験の皆さん、若手エンジニアの皆さん、勉強方法について悩みがあればなんでも気軽に質問して下さい！
これからも記事を書いていきますので、モチベーションアップのためフォロー、イイねお願いします。
Trailhead フォームを使用したデータの入力

# はじめに
表題`フォームを使用したデータの入力`で実装に問題なさそうだなーと長いことエラー原因がわからず時間を無為に消費してしまったので自戒の念を込めて投稿するものである。

# 事象
```
The campingList component doesn’t appear to have a Packed checkbox field in the form using a Lightning Base component.
```
とパッキング済みの項目が見つからんと言われてしまっていた。

# 原因
他の項目を先に実装していてそれをコピペしていたのだが、チェックボックスの値を示すのは`value`じゃなくて`checked`だった。