OmniAICreator/Qiita-1.07M huggingface dataset:
プロジェクト参画　環境構築やること

環境構築手順をメモしていきます。
## 1.リポジトリのクローン作成
GitリポジトリのURLが提供されているはずなので、リポジトリをクローンします。
```
git clone <repository-url>
cd <project-directory>
```

## 2.依存関係のインストール

依存関係とは、プロジェクトが動作するために必要な外部ライブラリやフレームワークのこと。ローカルで正しく動作させるために、必要な依存パッケージをインストールします。（npm installやyarn installでインストールすると、それらはプロジェクトのローカル環境にあるnode_modulesディレクトリに保存されます。このディレクトリは、プロジェクトのルートフォルダに自動的に作成されます。）
また、ローカルマシンでJavaScriptコードを実行したりnpmを使ったりするために必要なのがNode.js。対応するNode.jsもインストールしておきましょう。
```
nodenv install <version指定>
npm install
```

## 3.環境変数の設定

#### 環境変数とは？
アプリケーションの設定情報を管理するための変数です。これらの変数には、APIキー、データベース接続情報、外部サービスのURLなど、アプリケーションが動作する際に必要な情報が含まれます。
例えば、開発環境と本番環境では接続先のURLやAPIキーが異なることがあります。このような情報をソースコードに直接書くのではなく、環境変数を使って管理することで、異なる環境に合わせて簡単に切り替えることができます。


#### .envファイルとは？
.envファイルは、プロジェクトの環境変数を定義するためのファイルです。このファイルには、開発者が使う環境変数を簡単に設定でき、プロジェクトの構成に合わせて編集します。

#### 具体的にどうすればいいのか？
プロジェクトの運用ルールにもよりますが、.envファイルを自分の開発環境に合わせて編集します。例えば、APIキーやURLなど、自分のプロジェクトで必要な情報を記入します。
ちなみに、.env.localなどの環境設定ファイルは、一般的には.gitignoreに追加され、リモートリポジトリにコミットされないように設定されています。これは、APIキーや機密情報が含まれていることが多いため、他の人と共有するべきではないからです。
これにより、個人の設定ファイルはローカルにのみ保持され、Gitにコミットされることはありません。

## 4.ビルドと開発サーバの起動
定義の確認からいきましょう。

#### ビルドとは？
ビルド（build）は、開発中のコードを最適化し、本番環境で動作する形式に変換するプロセスです。ソースコードを圧縮したり、モジュールバンドル（依存関係をまとめる作業）を行ったりします。

具体的には、
トランスパイル: JSXやTypeScriptなどのコードをブラウザが理解できるJavaScriptに変換します（BabelやTypeScriptコンパイラを使用）。
最適化: 不要なコードを削除し、ファイルサイズを小さくします（デッドコードエリミネーションや圧縮）。
モジュールバンドリング: JavaScriptファイルを1つまたは少数のファイルにまとめます（WebPackやRollupを使用）。
コード分割: ページごとに必要なコードだけを読み込むように分割します（コードスプリッティング）。
などの処理が行われています。

つまり、本番環境にデプロイする準備のために必要なことなんだね。
生成されたファイルはdistやbuildフォルダに保存され、これをWebサーバーにデプロイします。
（ビルドは本番環境にデプロイする際に行うのが一般的で、開発のたびに毎回ビルドする必要はありません。）

#### 開発サーバーの起動とは？
開発中にアプリケーションを素早く確認できるローカル環境を立ち上げることです。開発サーバーは、コードの変更があった場合に自動で再ビルドを行い、即座にブラウザへその変更を反映します（ホットリロードやライブリロード）。

```
next build
next dev
```

## 5.ローカル開発環境を構築し、リモートサーバーと連携させる
リモートサーバーの設定を行い、ローカルドメインを名前解決できるようにするためのものです。リモートサーバーに接続するためのURLと、ローカルホスト上でのカスタムドメイン名を設定しています。この設定をしないと、APIからデータを取得できず、ページが正しく表示されないことがあります
（puma-devがインストール済みであることが前提。puma-devは、Ruby on Railsアプリケーションなどの開発環境を簡単にセットアップするためのツール。）
```
echo 'http://remote-server-ip:20000' > ~/.puma-dev/work.jp
npm install
```
echoは、指定した文字列を出力するコマンドです。リモートサーバーのIPアドレスとポート番号を示していて、これを/.puma-dev/work.jpというファイルに書き込むことを意味します。このファイルにURLを記述することで、puma-dev が特定のドメインやサブドメインでリクエストをリモートサーバーにリダイレクトする設定を行っています。つまり、work.jp というサブドメインを指定すると、リモートサーバーにリクエストを転送する設定を行っています。これにより、ローカル環境で動作するように見せかけながら、実際にはリモートサーバーと通信できるようになるということです。

続いて、名前解決用の設定を追加します。

```
sudo echo '127.0.0.1	remote-work.jp' >> /etc/hosts
```
sudoは、管理者権限でコマンドを実行するためのもので、/etc/hostsファイルに書き込みを行うために必要です。127.0.0.1は、ローカルホスト（自分のマシン）を指します。
remote-work.jpは、リモートサーバーを指すカスタムドメイン名として設定されます。このドメイン名も適切なものに変更する必要があります。>>は、指定したファイルに追記するための記号です。ここでの設定により、指定されたドメイン名がローカルホストに解決されるようになります。

つまり、これらの設定は、ローカル開発環境で puma-dev を使って、リモートサーバーにあるアプリケーションにローカルのカスタムドメインを使ってアクセスできるようにするものです。
TeamsにFormsが追加できない？！簡単に説明

## 突然TeamsにFormsを追加できなくなった！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/84f84123-3cbd-06e3-454f-b85dbaa3cefe.png)
追加しようとすると「非推奨です」と！

Formsなくなるのか・・・？
と思いましたが違いましたね。

## 代わりにPollsを使う？ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/b1b987bf-cc38-4443-fac0-56e45164b923.png)

Formsと似たような機能が使えそうなかんじ

特筆変わった仕様はないような・・・？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/b2f9d5bf-e26c-1db3-8b98-2601ec7b03f6.png)


## Pollsでできないこと
一番大きなところは回答形式の違いです。
Formsと同じように長文の回答欄を作ることができません。

Pollsは基本的に”投票”という名目でやっていくようです。

## Pollsのメリット
リアルタイムで投票や簡単な質問をするときに活躍しそうです。

・作成が簡単
・結果をリアルタイムに確認
・結果をエクスポート

## Polls利用例 ～ワードクラウド～
案だしで役に立ちそう！
しかも似ている単語を自動で仕分けてくれました！ありがたい！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2524942/fdfce9e7-61f2-673d-3734-b55839b6943a.png)
Qiita始めました

# はじめに
経験者専門プログラミングスクール「JISOU」に入会した結果、いつ作成したのか分からないQiitaのアカウントを引っ張り出して記事を書いていくことになりましたｗ

# 現在の自分
未経験から新卒でエンジニアを始めて大体7年くらいになります。
今まで何も考えずに与えられた仕事をなんとなくでやってきており、自己学習についても興味が出たものを調べて、試してみて、挫折してを繰り返してきたので、色んな技術の名前だけ知っているが何一つ満足にできない人となっております。

# 決意
このままでは何一つ満足にできない人で人生が終わりそうなので、JISOUを最大限活用してフロントを自身の活躍できる領域として確立する。

# 目標
短期：3か月でカリキュラムを終わらせて、しっかりと基礎を身に着ける
中期：Reactで自身の作りたいものを形にできる力を身に着ける
長期：特にイメージが沸かないので、その時になったらまた考えます
PC新調したのでVSCodeでReactの開発環境整えてみた

タイトルの通り、新PC(Windows)で新しい開発環境を作ってみました。
やっていることは参考(https://high-career.jp/2022/01/04/vscode-react-dev/ )とほぼ同じです。

# 全体の流れ
1. VSCodeのインストール
1. Node.jsのインストール
1. VSCodeを起動しReactプロジェクトの作成
1. プロジェクトの実行

# ざっくり注意
プロジェクト作成時、npmで必要なファイルが見つからなかったらしくエラーが出ました。
もし同じようにエラーが出た場合は提案されたバージョンのnpmにアプデしてみましょう。

# VSCodeのインストール
[公式サイト](https://azure.microsoft.com/ja-jp/products/visual-studio-code)からダウンロードしてインストールする。
必要があれば途中の設定は適宜変更してください。

# Node.jsのインストール
## なんとなくインストールされていないことを確認
コマンドプロンプトを起動し、「node --version」を実行する。
![スクリーンショット 2024-10-20 142134.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/2a3ead44-b3b4-e422-69ef-0818b2ac101f.png)
まだ入っていません。
## インストール
[公式サイト](https://nodejs.org/en)からダウンロードしてインストールする。
VSCodeと同様に、必要があれば設定は適宜変更してください。

## nodeとnpmがインストールされたことを確認する
コマンドプロンプトを起動し、「node --version」を実行する。
先程の「なんとなく確認」に使ったコマンドプロンプトでは確認できないため、新しくコマンドプロンプトを起動してください。
![スクリーンショット 2024-10-20 143341.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/599902a2-942a-9f88-d4a2-13d3bb84f1dd.png)
v20.18.0がインストールされました。
先にオプションの文字をタイプミスしているのは気にしない。

続けて同じコマンドプロンプトで「npm --version」を実行する。
![スクリーンショット 2024-10-20 144525.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/f573d7cb-a9fb-601b-5c9d-ab7d74a08057.png)
10.8.2がインストールされました。
# VSCodeを起動しReactプロジェクトの作成
## VSCodeを起動し、ターミナルを開く
![スクリーンショット 2024-10-20 144936.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/766c0c17-91fa-9269-af30-00fed76f72ab.png)
画像ではまたnodeの確認をしています。心配性ですね。
## Reactプロジェクトを作成する
必要があればターミナルでcdコマンドを使用し、プロジェクトの作成をするフォルダに移動する。

ターミナルで「npx create-react-app hoge」を実行する。
アプリ名は任意です。

## なんかエラーが出たが？
![スクリーンショット 2024-10-20 145746.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/dc6a249a-ed6e-5f03-1ea5-aa33c441b596.png)
npmの実行に必要そうなファイルが見つからないようです。
npmのバージョンを上げればという提案がされていますが、先にPCの再起動を試してみます。

再起動したためコマンドをもう一度実行します。
![スクリーンショット 2024-10-20 151209.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/e7e3caee-fa9a-45db-b3e5-3b3d481beb64.png)
ダメだったため素直に最初に提示されたnpmのアプデをしました。
(再起動後は何故かnoticeが表示されなかったためアプデコマンドは手打ちでした)

## npmのアップデート後、もう一度プロジェクトを作成
提案された「npm install -g npm@10.9.0」を実行後、再び「npx create-react-app hoge」を実行します。
(npmのアプデのバージョンは表示された通知をもとに適宜変更してください)
![スクリーンショット 2024-10-20 151610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/814dfa39-6358-cb27-a3be-11de0d6c348a.png)
確認が始まったのでプロジェクトの作成に成功したようです。
「y」を入力後、Enterを押して少し待ちます。

![スクリーンショット 2024-10-20 153030.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/66de3624-93e8-530f-a0f2-854538a67fcc.png)
プロジェクトの作成が完了しました。

## プロジェクトの実行
VSCodeのターミナルで「cd hoge」を実行し、プロジェクトフォルダに移動します。
アプリ名の部分は適宜変更してください。
移動後、「npm start」を実行します。
![スクリーンショット 2024-10-20 154013.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36039/6e690795-20d4-c767-b22a-8b6515fe5f5a.png)

無事アプリが立ち上がるとブラウザが起動し、ページが表示されます。
ページの画像は省略します。

あとはいつものようにアプリを構築していきましょう。

# 余談
インストール時の設定は何も変えてないのにエラーが出たのは何故なのか。
でもアプデして動いたからヨシ！

# 参考
https://high-career.jp/2022/01/04/vscode-react-dev/
ウェブ・セキュリティ基礎試験(徳丸試験)受験のすゝめ

# はじめに
セキュリティが必要なことは語る必要もなくなった現代，つよつよエンジニアの皆さんは日々セキュリティに関する最新情報を収集し勉強していることと思います．

私個人の話をすると，最近IT企業に足を踏み入れたばかりの新人で，Webアプリ開発に携わるよわよわエンジニアです．よわよわエンジニアだろうが，携わるWebアプリのセキュリティは気にしなければならない状況下にあります．恐らくですが，似たような境遇の方も多くいらっしゃるのではと思います．

そこで紹介したいのが「ウェブ・セキュリティ基礎試験」通称「徳丸試験」です．

# 記事の対象
私のような新人エンジニアやWebセキュリティを学びたいと考えている人

# ウェブ・セキュリティ基礎試験とは
Webセキュリティの名著であり，徳丸本の愛称で知られている[体系的に学ぶ 安全なWebアプリケーションの作り方 第2版](https://www.amazon.co.jp/dp/4797393165/)を出題範囲とし，基礎的な知見を問う試験．
公式HPは以下のリンクから飛べます．
https://www.phpexam.jp/tokumarubasic

## 試験の概要
※ 公式HPより転載
| 項目 | 内容|
|:-:|:-:|
|  試験名称 |  ウェブ・セキュリティ基礎試験 |
| 通称名  |  徳丸基礎試験 |
|  ITSS | レベル1  |
| 合格率  |  72.8%（2023年10月時点） |
| 受験料金  |  1万円（外税）　※学生および教職員は50％オフでの受験が可能 |
| 試験センター  |  全国のオデッセイコミュニケーションズCBTテストセンター |
|  試験時間 | 1時間  |
| 設問数  | 40問  |
| 合格  |  70％正解 |
| 主教材  |  [体系的に学ぶ 安全なWebアプリケーションの作り方 第2版](https://www.amazon.co.jp/dp/4797393165/) |

合格率も高く，ITSSのスキルレベルもITパスポート同等のものであるため，比較的とっつきやすい試験だと感じております．

# なぜ受けるべきか
「知識をつけたいなら参考書を読むだけで十分」「資格試験は取るだけでは実務に活かせる部分が少なく意味がない」等々，色々な意見があるのは重々承知していますし，どれも間違いではないと思います．
ですが，「学習を進め，知識の習得率を測るために試験合格をゴールとする」ことは大変有意義なことだと私個人は思います．その理由を以下に2点述べたいと思います．
## セキュリティの体系的な知識は知ろうとしないと身につかない
まず大前提ですが，受け身で学習していても部分的な知識しか身につきません．
受け身でいる場合，ニュースで見るようなセキュリティ事故やSNSで閲覧する表層的な知識くらい得ることができません．情報収集がしやすい反面，体系的に学ぶことができないのが欠点です．
これは，ITに携わりたてのよわよわエンジニアには致命的であると考えています．

そのため，試験合格というわかりやすい目標設定が行えることは，新人やセキュリティを学び始めた者にとっては大きなメリットになると考えます．

## 知識習得の有無が結果として現れる
こちらが1番のメリットだと思います．学習目的であれば，試験を受けなくても参考書を読むだけでも確かに知識が得られます，しかし，どれだけ身についているかは当の本人のみでは判断ができません．技術記事などを通してアウトプットしても，プロフェッショナルの方々から，それが正しくまとめられているかや，間違いを修正して頂くことは少ないです．新人は孤独です😢
その点，試験では合格・不合格である程度の習得率が分かりますし，解けない問題があれば本人が1番理解不足を知れることになります．

# ウェブ・セキュリティ基礎試験を受けて
上記の通り，体系的な知識の習得，知識の習得率を測る目的で受験し，無事合格致しました(825/1000点)．
問題数にして7問の不正解がありました．合格こそしたものの，まだまだ学習が足りないと実感できました．この結果を受け，参考書の読み直しや，実習環境を用いて各種攻撃や防御策を真の意味で身に付けられるように学習を進めていきたいと思います．

# 最後に
徳丸試験を受けよう！
Python ライブラリとかimportの話  その2（自分用）

前回に続いて、importやライブラリについて応用編を書いてみる。

目次
1. fromとは
2. ライブラリ？関数？クラス？（ここが理解できたら面白くなる！）
3. まとめ

1.fromとは
-
前回importについて記述したが、他にもfromという構文があり、最初は意味がわからなかった。
```python:example.py
from datetime import date
```
これを日本語で言うと、「datetimeというライブラリから、dateっていう機能だけを装備する」みたいな意味となる。

2.ライブラリ？関数？クラス？
（ここが理解できたら面白くなる！）
-
2.1：構造を図示して確認する
```
datetime　←　from
|
├── class date  ←　import
├── class time
├── class tzinfo
```
2.2：使い方をまとめてみる
```python:クラスをインポート
from datetime import date
today = date.today()  # date クラスを使用
print(today)
```
```python:関数をインポート
from math import sqrt
result = sqrt(16)  # sqrt 関数を使用
print(result)  # 4.0
```
```python:ライブラリ全体をインポート
import math
result = math.sqrt(16)  # モジュール名を使って関数を呼び出す
print(result)
```
このイメージが理解できてから「あっ、Pythonってそういうことか！」と、より一層理解が深まった気がする。⇒ <a href="https://qiita.com/mm02060116/items/0af736887f1021d5363a">クラスのお話はこちら</a>

3.まとめ
-
この仕組みがわかれば、どこに何を書いたらどうなるか？の概念がだいぶ理解できているはずである。
<strong>「この部分は別のスクリプトに書いて、インポートにしよう」</strong>みたいな感じ考え方ができるようになった気がする。
【機械学習初学者向け】RNNからLSTMへ。そしてTransformerへ【初学者向け】

## 1. Transformerの概要

　Transformerは、ニューラルネットワークをベースとしたディープラーニングのモデルで、特に自然言語処理（NLP）の分野で広く使われています。このモデルは、従来のRNN（リカレントニューラルネットワーク）やLSTM（Long Short-Term Memory）といった時系列データを扱うモデルの限界を克服するために開発されたモデルになります。RNNLSTMについても下記の記事を参照ください。
 
 https://qiita.com/Life-tech/items/6051c35fd955815bf1f1
 
## 2. RNNの限界とTransformerの革新

　RNNは過去の情報を保持して、次のステップにフィードバックするという機構(**下図の回帰結合層**)を持っていますが、長いシーケンスにおける情報の依存関係を十分に学習することが困難で、「長期依存関係」の問題を抱えています。これに対処するためにLSTMやGRUなどが開発されましたが、計算リソースが膨大になるという問題がありました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/381629/0220f1f3-ccaa-0423-2dd5-6738aae9fc56.png)

　TransformerはRNNのような逐次処理を排除し、代わりに全ての入力単語に対して一度に注意を向ける「**Attention機構**」を取り入れたモデルです。このため、並列処理が可能で、RNNよりも高速かつ効率的に長い依存関係を学習できるようになっています。

## 3. Encoder-Decoderモデル

　Transformerは、エンコーダー・デコーダーモデルの構造を持っています。エンコーダーが入力を処理して、デコーダーがその出力から目的の結果を生成します。特に、注意すべきは「Self-Attention」と呼ばれる機構で、これは入力データ全体の中でどの部分に注意を払うべきかを学習します。このSelf-Attentionが、長距離の依存関係を効率的に捉えるための鍵となっています。

## 4. Attention機構
　Attention機構は、「時間の重み」をネットワークに組み込んだもので回帰結合層の重み付き和を採用することで、時間の重みを考慮したモデルを実現する。

 Attention機構は、ある単語が他の単語とどれくらい関連しているかを計算する手法で、文全体を考慮しながら、特定の単語に重み付けを与えて処理します。これにより、Transformerは文中のどの単語に対しても双方向的に注目しながら情報を効率的に処理できるのです。

　トランスフォーマーはエンコーダとデコーダからRNNを排除し、代わりにSelf-Attention（自己注意機構）と呼ばれるネットワーク構造を採用している点が最大の特徴になります。

## 5. BERTとの関係

　BERTは、このTransformerのエンコーダー部分を利用して、双方向から文脈を理解できるように設計されたモデルです。BERTの革新は、文脈を左右両方向から同時に捉える「双方向性」にあり、これが従来のモデルよりも精度を向上させる大きな要因となっています。

## 修正版の説明

　Transformerは機械学習におけるディープラーニングモデルで、特にRNNが抱えていた長期依存関係の問題を解決するために開発されました。RNNでは逐次処理が必要で、過去の情報をフィードバックする機構がある一方で、長いシーケンスに対する学習が困難でした。
　Transformerではこの逐次処理を排除し、Attention機構を組み込んだエンコーダー・デコーダーモデルとして設計されています。このAttention機構により、入力データ全体を一度に処理し、文の各部分がどのように相互に関連しているかを効率的に学習します。
    特に、Self-Attentionという仕組みによって、文中の単語同士の依存関係を双方向に捉えることが可能となり、従来のRNNベースのモデルよりも高精度かつ高速な処理が可能になりました。
CPUの仕組みとレジスタの役割

## はじめに
勉強する習慣を付けたいということで1日1項目1時間勉強していこうと思います。
そして学習した内容をまとめていきます。
学ぶ項目は自分が興味あること、面白そうだと思った項目を選んでいこうと思います。
今回がその第１回目となります。
今回は基本情報技術者試験でも序盤で学習する「**CPUの仕組みとレジスタの役割**」について学習しました。

## CPUとは
CPUはCentral Processing Unit (中央処理装置)の略です。
数値計算、情報処理、機器の制御といった処理を担い、コンピュータの心臓とも言える重要な部分です。

## CPUにできること
- 四則演算・論理演算

- データのコピー

- プログラムの制御

- 入出力（I/O）処理の管理

## レジスタとは
レジスタは、CPU内部に組み込まれている非常に高速な記憶装置で、データや命令を一時的に保存するために使用されます。また、メモリのアドレスを指し示して読み書きを行う際にも使用されます。CPUの動作中、頻繁に使用されるデータをレジスタに保持することで、処理の高速化を実現しています。

1つ1つのレジスタは、8ビット、16ビット、32ビット、64ビットなどの単位でデータを保持することができます。ビット数が大きいほど、より多くの情報を一度に取り扱うことができるため、処理の性能に影響を与えます。

## CPUとレジスタの関係
レジスタは、CPU内でのデータ処理の中心として重要な役割を果たしています。CPUは、プログラムの実行中に必要なデータや命令を一時的にレジスタに保存し、そこから直接操作を行います。

もしレジスタが存在しなければ、CPUは処理のたびにメインメモリ（RAM）からデータを読み書きする必要がありますが、これは非常に遅いため、全体の処理速度が大幅に低下します。レジスタはCPU内部にあるため、メモリと比べてはるかに高速にアクセスできるのが特徴です。

### CPUとレジスタのイメージ
- CPU：指揮官のように全体の処理をコントロールする
- レジスタ：指揮官の手元のメモ帳として、今必要な情報を即座に書いたり読んだりする場所

## レジスタの主な種類
1.**汎用レジスタ（General Purpose Register）**
用途：演算処理やプログラム実行時に、特定の用途に限定せず幅広く使用されます。
役割：数値演算や論理演算、データの一時保管など、多目的に活用されます。

2.**プログラムカウンタ（Program Counter, PC)**
用途：実行する次の命令のアドレスを保持するレジスタ。
役割：プログラムの命令が実行されるたびに、プログラムカウンタの値が更新され、次に実行する命令のメモリアドレスを指し示します。これにより、命令が順番に正しく実行されます。

3.**命令レジスタ（Instruction Register, IR）**
用途：現在実行中の命令を一時的に保持します。
役割：メモリから取得した命令がこのレジスタにロードされ、CPUがそれを解釈し、実行します。CPUの処理サイクルの中心となるレジスタです。


4.**アキュムレータ（Accumulator）**
用途：演算結果を一時的に保存するレジスタ。
役割：例えば、領域1から領域2にデータを移動する際、アキュムレータを介してデータを転送します。
例：
領域1 → アキュムレータ → 領域2

5.**スタックポインタ（Stack Pointer, SP）**
役割：スタック領域の管理を行う。
特徴：関数呼び出し時にデータの保存や復元を行い、CPUは後入れ先出し（LIFO）でスタックを操作します。

6.**フラグレジスタ（Flag Register）**
役割：演算後の結果に応じたフラグを保持する。
特徴：条件分岐命令で使われ、演算結果に基づいてプログラムの流れを制御します。

主なフラグ：

OF（オーバーフロー）：演算結果が範囲を超えた場合
ZF（ゼロフラグ）：演算結果が0の場合
SF（サインフラグ）：演算結果が負の値だった場合 

## プログラムの処理とレジスタの動き
プログラムを実行すると、CPU内部のレジスタでどのような処理が行われるのかを理解していきます。以下のようなシンプルなコードを例に、レジスタが裏でどのように働くかを見ていきましょう。
```java:
int a = 5;
int b = 3;
int c = a + b;
```

### プログラムの処理

```java:
int a = 5;
```

### レジスタの処理
命令:
メモリに5という数を保存する命令が実行される。

レジスタ動作：
１、レジスタR1に5を一時的に格納する。
２、R1からメモリに5を保存する。

### プログラムの処理

```java:
int b = 3;
```

### レジスタの処理
命令:
メモリに3という数を保存する命令が実行される。

レジスタ動作：
１、レジスタR2に3を一時的に格納する。
２、R2からメモリに3を保存する。


### プログラムの処理
```java:
int c = a + b;
```

### レジスタの処理
命令:
メモリから変数aとbの値を読み取り、それらを加算する命令が実行される。

レジスタ動作：
１、メモリから変数a（=5）を**汎用レジスタR1**にロード。
２、メモリから変数b（=3）を**汎用レジスタR2**にロード。
３、ALU（演算装置）がR1とR2の値を加算し、その結果8をアキュムレータ（ACC）に保存。
４、アキュムレータの値（=8）を**レジスタR3**に移します。
５、レジスタR3にある結果8をメモリの変数cに保存します。

### 全体の流れ
R1 = 5 （変数aの値を保持）
R2 = 3 （変数bの値を保持）
ACC（アキュムレータ） = R1 + R2 = 8 （加算結果を一時保持）
R3 = 8 （結果を変数cに保存）

このように、普段意識することのないレジスタの動きが、プログラムの裏で高速に行われています。レジスタを活用することで、CPUは不要なメモリアクセスを減らし、プログラムを効率的に実行します。

こうした仕組みを理解することで、メモリの無駄遣いを避け、より効率的なプログラム設計ができるようになります。これを知ることで、CPUとメモリの動きを意識したプログラミングを心がけることも可能になります。

調べれば調べるほどもっと詳しい内容を知れるがとりあえず1時間で学べたことはここまで。

## 参考
https://qiita.com/zacky1972/items/ef4486e8a6d95edb68fd

https://emb.macnica.co.jp/articles/13347/

https://www.foresight.jp/fe/column/cpu/?srsltid=AfmBOoqiT8DDjZbIddiY5vAqhsp90TvXjGruTAZokaHn_mV-Pert2azQ
package managerについて　その2

## package managerの実装について
https://github.com/g-plane/tiny-package-manager/tree/master
https://zenn.dev/sa2knight/articles/d473ca2894b659

上記のサイトを参考にしながら、どのような実装になっているのかを理解していきたいです。

理解したい部分は
- インストールするものをどのように取得しているのか
- どのようにインストールをしているのか

の2点です。

### インストールするものをどのように取得しているのか

package.jsonや`npm i`で指定したライブラリをインストールするリストに格納するのはなんとなくわかるのですが、依存関係があるライブラリをどのようにして取得しているのかが、疑問でした。

npmレジストリで公開されているパッケージは、マニフェストファイルと呼ばれるものがあり、ここに依存関係があるパッケージなどの情報が記載されているらしい。


### どのようにインストールしているのか

上記で記載した、マニフェストファイルの中にパッケージをインストールするためのURLが記載されており、そこからインストールしている。

tar形式でインストールされるので、インストール後回答を行っている。
UbuntuでGUIソフトを動かしたときの文字化けをなくす方法

# 遭遇環境
 Ubuntu 24.04.1 LTS
Mozilla Firefox 131.0.3
# 解決方法
takaoフォントをコマンドラインでインストールする。
``` bash:書き方
~$ sudo apt install fonts-takao
```

FIrefoxの右上から
setting>General>fonts
に以下の画像のように設定されているかを確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3914763/e9894ae8-5d30-ac3e-6516-874223493ea3.png)

ウィキペディア
https://ja.wikipedia.org/wiki
などで日本語が表示させているか確認する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3914763/2d23bbef-6a91-a630-da38-be81fbc62185.png)
Webサーバ上で生成した画像データをWebクライアントに出力する

# 概要
Webサーバ上で画像を動的に生成し、Webブラウザ等のクライアントに表示させたりダウンロードさせたりしたいことがあります。
本稿ではその手順についてPerl, PHPでのサンプルコードを紹介します。

# 前提
## 画像データの生成方法について
本稿では、簡略化のため、画像データについてはファイルから読み込んでそのまま出力することとします。
GDライブラリを使用した画像データの生成方法については別途説明したいと思います。

# サンプルコード
## 基本的な流れ
1. 画像データを生成する
ここでは、スクリプトと同じディレクトリのsample.pngという名前の画像ファイルを読み込むようにします。
1. HTTPヘッダを出力する
Content-TypeヘッダでPNG形式を指定し、Content-Dispositionヘッダで出力するファイル名を指定します。(後者は必須ではありません。)
Perl版ではロジックの関係上画像ファイルの長さを取得できるので、Content-Lengthヘッダをサボらずに出力しています。
1. 画像データを出力する

PHP, Perlの順にコードを載せます。

## PHP版
```php:php_img_stream.php
<?php
//出力するファイルを読み込む(ここではPNGを前提とする)
$file_name = "./sample.png";
$contents = file_get_contents($file_name);

//画像を出力する前に明示的にレスポンスヘッダを出力する
header("Content-Type: image/png");
header('Content-Disposition: inline; filename="sample.png"');

//PNGイメージでストリーム出力
echo $contents;
?>
```

## Perl版
PHP版のheader()関数のようなものを使用していないので、ヘッダと本文の間の空行を忘れないようにします。
```perl:perl_img_stream.pl
#! /usr/bin/perl

use strict;

sub main() {
    my $file_name = "sample.png";
    
    open(my $fh, "<", $file_name) or die();
    binmode($fh);
    
    my $buf = "";
    my $bin = "";
    while(sysread($fh, $buf, 256)) {
        $bin .= $buf;
    }
    close($fh);
    
    print "Content-Length: ", length($bin), "\n";
    print "Content-Type: image/png", "\n";
    print "Content-Disposition: filename=sample.png", "\n";
    print "\n";
    print $bin;
}

&main();
```

## 実行例
PHPのビルトインサーバを利用して、PHP版をローカルで動かしてみます。
1. コマンドラインより以下を実行
`php -S localhost:8080 php_img_stream.php`
1. Webブラウザで以下のURLにアクセス
http://localhost:8080/
1. 以下のように画像が表示されれば成功
<img width="400" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3893745/c078439e-63fa-d263-27ba-b5ce808471ca.png">

# サンプルコードのありか
GitHubにサンプルコードとサンプル画像を置いています。
https://github.com/kk-outlaw/image_stream


# 追記：直接ダウンロードさせたい場合
ブラウザに直接表示させるのではなくダウンロードのダイアログから保存させたい場合、以下のようにContent-Dispositionヘッダを変更します。
```php
header('Content-Disposition: attachment; filename="sample.png"');
```

これを応用すると、画像ファイルのみならずZIPファイルなどもダウンロードさせることができます。
```php
header('Content-Type: application/zip');
header('Content-Disposition: attachment; filename="sample.zip"');
```
「スカラー値」とは

## スカラー
> **一つの数値（ 変数 ）で表されるもの** 

身長 182cm とか、体重 64kg とか　一つひとつの測定値のこと

## ベクトル
> **複数個の数値の組で表されるもの** 

[身長 182cm, 体重 64kg, 胸囲 90cm，坐高 91cm]
のように各測定値をまとめたもの

## まとめ
> **ベクトル**は**スカラーの集合** である
ベクトルを構成する **スカラー** を **「ベクトルの要素」** という

「スカラー」と「ベクトル」
つまり「大きさ」と、それを「まとめたもの」

## 参照
https://shikatanaku.blogspot.com/2012/03/blog-post.html
【ライフハック】シングルタスクを徹底する！ マルチタスクはするな

# シングルタスクを徹底する！マルチタスクはするな

**マルチタスクで仕事がはかどらないと感じたことはありませんか？**

こんにちは。ORGE（オーガ）です。

複数のプロジェクトやタスクを同時に進めることが日常的にありますが、それが本当に効率的なのでしょうか？実は、**マルチタスクは生産性を大きく低下させる**ということが多くの研究で証明されています。

今日は、なぜシングルタスクが効率的なのか、そしてシングルタスクを徹底するための具体的なアクションプランを紹介します。

## まずは結論！今からやるべきアクション！
- **25分または50分に一度休憩をする**  
（みなさんの記憶に残るようにキャッチーな画像を添えます）
（不快だったらすみません、、、）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/d4720fef-6f94-0d32-a4c6-f2d925d0360b.png)


### アクションの説明

シングルタスクを習慣化するには、一定の時間に集中し、その後に短い休憩を入れる「ポモドーロテクニック」が有効です。**25分または50分**という集中時間を区切り、タイマーをセットして1つのタスクに集中します。その後に**5分から10分**の休憩を取り、脳をリフレッシュしましょう。この方法を繰り返すことで、長時間にわたる集中力の維持が可能になります。

休憩時間は、軽いストレッチやウォーキングをすることでさらにリフレッシュ効果を高めることができます。また、この区切りを作ることで、タスクを完了させる達成感も得られやすくなり、仕事の満足感も向上します。

---

## 1. マルチタスクは脳に負担をかける

マルチタスクをすると、脳が複数の作業間で注意を切り替える必要があります。この「注意の切り替え」は、脳にとって非常に負担が大きく、**集中力を大きく削ぎ、生産性が下がる**原因となります。

---

## 2. マルチタスクの誤解

多くの人は、マルチタスクをすることで多くのことをこなしていると思いがちですが、実際はタスクが中途半端になりがちです。各タスクの完了度が下がり、最終的には質の低い成果物になってしまうことも。

## 3. シングルタスクがもたらす集中のメリット

シングルタスクに徹すると、1つの作業に対する集中力が高まります。その結果、**作業のスピードが速くなり、ミスも少なくなる**というメリットがあります。さらに、集中した状態で得られる「フロー」状態に入ることで、深い作業ができるようになります。

## 4. シングルタスクの習慣化

シングルタスクの効果はすぐに実感できるはずですが、習慣化するには少し時間がかかるかもしれません。習慣にしてしまえば、自分のペースで効率的に仕事を進められるようになります。

## 終わりに

マルチタスクは一見効率的に思えますが、実際は作業の質やスピードを犠牲にしてしまうことが多いのです。シングルタスクを徹底して、1つずつ確実に仕上げていくことで、結果的に生産性が高まるだけでなく、達成感も味わえるでしょう。

この記事を読んだことで、あなたの行動変革に影響できるとうれしいです🙌
ReactでUIを作る方法

**今回はReactで簡単なUIを作る方法について記事にしたいと思います。
初学者のかたはわからない用語なども出てくると思いますので、公式ドキュメントについても記事にしています。**

https://qiita.com/y-t0910/items/95cf832504231d89466a

# 1. React プロジェクトの準備
React プロジェクトを始めるためには、以下のコマンドで create-react-app を使ってプロジェクトを作成します。

プロジェクトの作成(個人的にはVScodeがおすすめです）
```bash
npx create-react-app my-app --template typescript
cd my-app
npm start
```
ブラウザで http://localhost:3000 にアクセスすると、React の初期画面が表示されます。

# 2. React コンポーネントの作成
**React では、UI はコンポーネントを組み合わせて作成します。以下は、Button コンポーネントと App コンポーネントの例です。**

**Button コンポーネントの作成**
src/Button.tsx
```tsx
import React from 'react';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick} style={{ padding: '10px', margin: '5px' }}>
      {label}
    </button>
  );
};

export default Button;
```

# 3. カウンターアプリの作成
**次に、ボタンを使ったカウンターアプリを構築します。**

**App コンポーネントの作成**
src/App.tsx
```tsx
import React, { useState } from 'react';
import Button from './Button';

const App: React.FC = () => {
  const [count, setCount] = useState(0);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>カウンター: {count}</h1>
      <Button label="+1" onClick={increment} />
      <Button label="-1" onClick={decrement} />
    </div>
  );
};

export default App;
```
useState フックを使って、カウンターの状態を管理します。
クリックイベントで count を増減させます。

# 4. スタイリングの追加
**CSS を使って UI をさらに改善することができます。以下は、CSS を使ってスタイルを整える例です。**

src/index.css
```css
body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
  background-color: #f0f0f0;
}

button {
  font-size: 18px;
  cursor: pointer;
}

h1 {
  color: #333;
}
```
ボタンと背景の色を変更し、テキストの色とフォントも調整しています。

# 5. UI の確認
**プロジェクトのルートで以下のコマンドを実行します。**

```bash
npm start
```
ブラウザで http://localhost:3000 にアクセスすると、以下のようなカウンターアプリが表示されます。

# 6. UI を改善するためのポイント
**レスポンシブデザイン**: CSS のメディアクエリを使って、画面サイズに応じたレイアウトに対応します。
**UI ライブラリの活用**: Material-UI や Ant Design のような UI ライブラリを使用することで、簡単にスタイリッシュな UI を構築できます。

# 7. さらに発展させる
以下のような機能を追加することで、より魅力的な UI を作成できます。

入力フォームを追加して、ユーザーからのデータを受け取る。
**React Router** を使ってページ遷移を実装する。

**React Routerについては別途記事にしていますので、こちらを見ていただけると嬉しいです。**

https://qiita.com/y-t0910/items/ad9b5ec87852e7849bed

**Redux** を使ったグローバルな状態管理を導入する。

Reduxについては別途記事にしていますので、こちらを見ていただけると嬉しいです。

https://qiita.com/y-t0910/items/06c9759c828802cff05b

**毎日更新していますので、@y-t0910をフォローしていただけると嬉しいです。**
Pinia の備忘録

お仕事で扱う技術が、Vue2 & Vuex から Vue3 & Pinia へ構成が変化したので勉強したこと、忘れそうなことを備忘録として残します！（間違っている可能性は大いにあるので生暖かい目で見てください）

## Pinia（ぴーにゃ） とは
Vue.js の Store管理を行う状態管理ツールです。
Vue のバージョン 3 から Vue 公式に推奨されているようです。

## store とは
値の状態を管理するものです。
各コンポーネントに、動作に必要な値を分散して記述するより、関係性ごとに集中管理した方が可読性が高く、安心安全性が高めだよねというスタンスです。（だと思っています）
store を定義し、使いたい時は目的の値が含まれた store を読み込んで使用します。
値を変更したい時は store を経由して値を変更します。

Reactとかだと、Redux、Recoil などが store 管理ができるライブラリになります。

## ざっくり使い方
### store
```typeScript
// useUserStore
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    fastName: "" as string,
    lastName: "" as string,
    age: null as number | null 
  }),
  getters:{
    getFullName: (state)=> `${state.fastName} ${state.lastName} `

  },
  actions: {
    changeFastName(fastName: string) {
      this.fastName = fastName
    },
    changeLastName(lastName: string) {
      this.lastName = lastName
    },
    changeAge(age: number) {
      this.age = age ?? 0
    },
    resetUser(){
      this.$reset
    }
  }
})
```
#### state
 `state` です。
その store で扱いたい値を定義しておく場所です。
[公式リファレンス](https://pinia.vuejs.org/core-concepts/state.html)


#### Getters
Vuex の `computed`  に相当します
主に、state の値に対する計算・加工などを行います。
state の値が更新されると自動的に定義している処理が走り、値が再計算されます。
[公式リファレンス](https://pinia.vuejs.org/core-concepts/getters.html)

#### actions
Vuex の `methods` に相当します
非同期処理を記載することができるので、API通信時などはここに記載します。
async/await を使いたくなったらここに書きます。
state 自身の値を更新したりするのもここの役割だそうです。
[公式リファレンス](https://pinia.vuejs.org/core-concepts/actions.html)

---
### 使用方法
説明はコメントに記載しています。
```vue
<script setup>
import { useUserStore } from '~/store/useUserStore'
import { setActivePinia,createPinia } from 'pinia'
import {ref, computed} from 'vue'

// store を初期化
const store = useUserStore()

// store に定義した actions を使って store を間接的に書き換える
store.changeFastName("やまだ")
store.changeLastName("はなこ")
store.changeAge(20)

/* 
getters は以下のように変数に代入しておくと、
関連する state が変わったときに何もしなくても値が更新される
*/
const fullName = computed(
  () => {
    return store.getFullName;
  }
)
</script>

<template>
    <div>
         <!--  state を呼び出して使う -->
        <p>fastName: {{store.fastName}}</p>
        <p>laseName: {{store.lastName}}</p>
        <p>age: {{store.age}}</p>
        <p>fullName: {{fullName}}</p>
    </div>
</template>
```

`npm run dev` をして立ち上げて見ると、こんな見た目になります。
なんらかの方法で`fastName`を書き換えると、`fullName` も書き換わります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2609739/b3606648-596f-e17b-78d2-7229b10dd456.png)


## まとめ
みなさまも良き Vue ライフをお送りください！
公式ドキュメント使い方（Reactを例に）

初学者のころ、公式ドキュメントの使い方がいまいちわからないなと思っていました。

**学習者にとっての「教科書」であり、開発者にとっての「辞書」として機能します。初学者からプロフェッショナルまで、すべての開発者が利用できるように整理されており、トラブルシューティングにも役立ちます。**

Reactの公式ドキュメントは、最新の情報やベストプラクティスを確認するための重要なリソースです。
以下のリンクからアクセスできます：

**https://react.dev/**
**ドキュメントの概要**
Reactの公式サイトは、新規ユーザーから上級者まで幅広いユーザーを対象としたガイドが揃っています。以下は、公式ドキュメントで提供されている主要なコンテンツの一部です：

# 1. 基本ガイド
**Reactの基礎**:: コンポーネント、JSX、Props、Stateの基本的な使い方を解説。
イベントハンドリング: ユーザーからの入力やイベントをどのように扱うかを学べます。
条件レンダリング: 特定の条件に応じてUIを変更する方法を紹介。

# 2. チュートリアル
**初心者向けチュートリアル**: 初めてReactを使う方向けに、ステップバイステップで進められる実践的なガイドです。
例: Tic-Tac-Toeゲームの構築。

# 3. APIリファレンス
ReactのAPI、フック（useState, useEffect, useContextなど）について詳細な説明が記載されています。
React.Component や React.PureComponent などのクラスコンポーネントについても学べます。

# 4. 高度なガイド
コンテキストAPI: グローバルな状態を管理する方法。
パフォーマンス最適化: Reactアプリのパフォーマンス向上のためのテクニック。
カスタムフックの作成方法。

# 5. Reactのエコシステム
**React Router** でルーティングを行う方法。
React Routerについては別途記事にしていますので、こちらを見ていただけると嬉しいです。

https://qiita.com/y-t0910/items/ad9b5ec87852e7849bed

**Redux** を使った状態管理の紹介。

Reduxについては別途記事にしていますので、こちらを見ていただけると嬉しいです。

https://qiita.com/y-t0910/items/06c9759c828802cff05b

Next.js や Gatsby との統合についても言及されています。

**Reactドキュメントの活用方法**
コード例: 各機能ごとにサンプルコードが豊富に掲載されているため、実際に試しながら学べます。
検索機能: ドキュメント内の検索を活用すると、必要な情報にすぐにアクセスできます。
日本語翻訳: Reactドキュメントは英語がメインですが、一部の翻訳版も提供されています。
React公式ドキュメントは、常に最新のアップデートが反映されているため、Reactを学習する上で信頼できる情報源です。開発中に困ったときは、ぜひ公式サイトで確認してみましょう。

今回は公式ドキュメンについて記事にしてみました。
**毎日更新していますので、@y-t0910をフォロー、いいねしていただけると嬉しいです。**
Goの気になり

仕事でGoを使うようになって１年ほどたったので、その中で若干気になっていることをまとめてみる。

## ポインタの使いどころ
ポインタによる変数の受け渡しは値のコピーをせずアドレスを渡すだけですむが、ガベージコレクションに負荷がかかりおおくのCPU時間を消費する可能性があるらしい。

どういうときに使うのか
- 引数やレシーバを関数内で書き換える必要がある場合
- コピーを避けたいデータを引数、レシーバにする場合
- 大きな構造体や配列を扱う場合
- 大きな構造体をスライスに持たせる場合

３つ目、４つ目の大きな構造体の大きいの基準とは？と思っていたところ、ちゃんと記述があった。
構造体のフィールドの値すべてを引数に取る関数を考え、多いと感じるかどうかで考えるといいらしい。

[Goにおけるポインタの使いどころ](https://zenn.dev/uji/articles/f6ab9a06320294146733)
[golang の 引数、戻り値、レシーバをポインタにすべきか、値にすべきかの判断基準について迷っている - pospomeのプログラミング日記](https://www.pospome.work/entry/2017/08/12/195032)

## 値レシーバとポインタレシーバ
Goでは型に対してメソッドを定義できる。
そのメソッドを定義するときに出てくる概念がレシーバである。

レシーバの宣言方法には２つある。
それが値レシーバとポインタレシーバなのだが、どう使い分けるのがいいのか。

自分なりの結論としては、レシーバの値を書き換えるようなメソッドを定義するときはポインタレシーバを使う、である。

ただし、メソッドを呼び出すときにレシーバの値はコピーされることを考えると、自分で定義した構造体のメソッドを定義するときは原則ポインタレシーバで定義するとしてしまってもよさそう。

ひとつ前のポインタの使いどころで書いた構造体の大きさによる判断は正直わからないので計測して効率化するとかじゃない限りは考えないことにした。


- [[Golang] A Tour of GoのMethodsを理解する](https://zenn.dev/syo_yamamoto/articles/f4afbc798cac90)
- [Go 言語の値レシーバとポインタレシーバ | Step by Step](https://skatsuta.github.io/2015/12/29/value-receiver-pointer-receiver/)

### さらに一歩
- [なぜGoのerrorインターフェースはポインタレシーバで実装するべきなのか - Yappli Tech Blog](https://tech.yappli.io/entry/methods-and-pointer-indirection-in-go)
- [Sliceのレシーバによって参照される値はコピーにはならない - チョキチョキかにさん](https://inabajunmr.hatenablog.com/entry/2018/09/01/195933)


## メソッドの引数における型
使う場面は限られているだろうが、どんな型の配列でも、スライスでも引数として受け取れる関数を作りたいとき、`interface{}`を使うことで実現できる

試しに以下のようなコードを書いてみる。
```main.go
package main

import (
	"fmt"
	"reflect"
)

func printElements(data interface{}) {
	fmt.Println(data)
	fmt.Println(reflect.TypeOf(data))
}

func main() {
	fmt.Println("int型配列")
	numbers := []int{2, 3, 5, 7, 11}
	printElements(numbers)

	fmt.Println("string型配列")
	texts := []string{"foo", "bar", "baz", "qux", "quux"}
	printElements(texts)
}

```

実行結果は以下のとおり、int型配列を引数に与えるとint型の配列が、string配列ならstring配列が関数内でそのまま使える。

```
int型配列
[2 3 5 7 11]
[]int
string型配列
[foo bar baz qux quux]
[]string
```

上で示したコード例において、引数の型を`[]interface{}`としてしまうと、コンパイルエラーとなる。
`[]interface{}`型の引数では`interface{}`型の配列・スライスしか受け取れないらしい。

続いて、引数の個数や型がわからない時の書き方。
この場合は以下のように書ける。

```main.go
package main

import (
	"fmt"
	"reflect"
)

func printElements(data ...int) {
	fmt.Println(data)
	fmt.Println(reflect.TypeOf(data))
}

func main() {
	fmt.Println("int型配列")
	numbers := []int{2, 3, 5, 7, 11}
	printElements(numbers...)

    // もしくは
	printElements(1,2,3,4,5)

}

```

[Go言語で配列・スライスをなんでも受け取れる関数を作る #interface - Qiita](https://qiita.com/u3xbf8i9/items/75e98a8b60d1533f87f2)
[Goのドット３つ - tom-256.log](https://mzqvis6akmakplpmcjx3.hatenablog.com/entry/2020/07/18/153543)

## Slice
[【Go】サブスライスは元スライスとメモリを共有する #Make - Qiita](https://qiita.com/Yporon/items/099448a69d070cc763fd)

## おまけ
参考にした記事の中であった以下のドキュメントはブックマークしておくとよさそう

https://go.dev/wiki/CodeReviewComments

日本語翻訳版はこっち

https://knsh14.github.io/translations/go-codereview-comments/
Airtableを使ってヒアリングシートを作ろうとした

※無料版の中での話です。間違いがあればご教示ください。

少しでも自分たちの仕事の負担を減らすべく、専用のシステムを用意されていない中でどうやって業務の負担を下げるか考え、chatGPTに相談した結果がタイトル通り。

[公式サイト](https://www.airtable.com/)はこちら

:::note info
なぜ"Airtable"を選択したのか
・専用のフォームを作成でき、フォームからの入力は会員登録不要(Airtable内の編集は登録必須)
・エクセルに近い感覚で触れる
・直感的に操作がしやすい
:::

:::note warn
デメリット
日本語に対応しきれていない
:::

-------------


立ち上げたら既視感のある画面になっている（Google翻訳使用）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/66bb3be6-8803-968b-32bf-ef386516a3cc.png)


一番上の項目をクリックするとフィールドの編集が可能

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/91361f4f-fc52-3531-14dd-c9a03b72cdbd.png)


フィールドを配置したら入力フォームの設置。
画面左下のテーブルの一覧から`形状`を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/dcc9540e-be7d-aa6a-926a-ebe5ddb04e19.png)

項目には必須設定が付与可能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/833520d3-0f61-76db-1894-5c7823fb369a.png)

他にも詳細設定が可能。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/678cd948-677b-4ad6-30e6-d530ba510775.png)


リンクは`Share form`から確認可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/341d645c-ba01-f879-ad94-7fb1acda50b9.png)


<details>
<summary>新しいリンクの生成も可能</summary>
Share form<br>
└ リンク設定<br>
　└ 新しいリンクを生成する<br>
</details>

実際のフォーム入力画面はこんな感じ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/b8cbab4b-bed2-239c-d9b2-23bb2171fedd.png)

入力して送信した内容はすぐに表に反映される
もちろんここで編集することも可能
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815653/54953047-effc-5f05-eb46-520518ddda49.png)

ただ、テキストエリア入力画面で最初の一文字目がどうしても変な入力方法になるのだけが地味にストレス…（勝手にEnter押された状態になる）
それ以外はかなり使いやすいと思った
画像を添付できるのも使う幅が広がって助かる

もし、似たような悩みを持っている方はぜひ試してみてください
エラスティカElastica

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/6d283d10-dd12-1a53-ad24-541175c694ea.png)

リボンのウネウネ、ケーキクリームのウネウネなどを描きたい！


ELASTIC CURVE(弾性曲線)
ELASTICA

https://ja.wikipedia.org/wiki/弾性曲線方程式

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




山村悟史さんのエラスティカに関する記事。
曲線を定義する条件を決めても、解が２つある例が図示されていてわかりやすい。

https://nature-architects.com/blog/1761/

さらに「双安定ヒンジキャップ」の記事も身近な例として、すごく納得しやすい。

https://nature-architects.com/blog/1728/

# 描画

Levien, R. L. (2009). From Spiral to Spline: Optimal Techniques in Interactive Curve Design. University of California, Berkeley.
p.20とp.84に図と式有り。

https://levien.com/phd/thesis.pdf

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/332a1177-5b1f-3966-5f11-52222658c7a9.png)


https://mathcurve.com/courbes2d.gb/linteaire/linteaire.shtml



https://www.nakanihon.co.jp/gijyutsu/Shimada/Computational%20geometry/chapter190303.html


とりあえず、下記サイトにあった、elasticaを微分した式から、目的の曲線を得られたので、elasticaはまた後ほど。

The theta-formulation of the 2D elastica -- Buckling and boundary layer theory

https://www.researchgate.net/publication/368333282_The_theta-formulation_of_the_2D_elastica_--_Buckling_and_boundary_layer_theory



```math
x=2cos\frac{\theta}{2}+ln|4tan\frac{\theta}{4}|
```
```math
y=2sin\theta
```
```math
0.823254983<\theta<5.459899536
```

エクセルで計算してグラフ描いて、イラレに読み込んで、曲線を４個つなげた図がトップの図。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/510257/f967feb6-e555-b842-b3d4-8f8cfbdb6e03.png)
【PostgreSQL】マイナスだったら０にする式

# 前書き
簡単な方法があったので備忘

# 本題
GREATESTを使う。
```sql
select greatest(-10, 0)
--> 0
select greatest(10, 0);
--> 10
select greatest(null, 0);
--> 0
```
:::note warn
PostgreSQLのGREATESTは他のDBとNULL挙動が異なります。
:::
【WordPress】　プラグインなしでバナーを固定する方法✏️

# はじめに

コードを直接記入してバナーを（上下に）固定する方法をまとめました！

私は、HTML・CSS・WordPress初心者なので日々試行錯誤しながらLPの作成をしています！
そんな初心者な私でもプラグインなしで簡単にバナーの固定ができました！

プラグインなしのメリットは、
* 自分の希望にあったプラグインやプラグインの使用方法などを調べる手間が省ける
* テーマやバージョンとの互換性を気にしなくてOK
* 課金しなくてもできる

ことなんじゃないかな〜と思っています！

# この記事の対象者
* 初心者でもWordPressを使いたい人
* ページごとに表示するバナーを変えたい人 
* スクロールしてもバナーを固定したい人

# コード例
下記コードでバナーを固定することができます！
URLやstyleは自分好みに設定してください。
```
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Banner</title>
     <style>
        /* ヘッダーバナーのスタイル */
        #header-banner {
            position: fixed;      /* 固定表示 */
            top: 0;               /* 画面上部に固定 */
            left: 0;              /* 左端に固定 */
            width: 100%;          /* 横幅を画面いっぱいにする */
            background-color: ＃rgba(0, 0, 0, 0);  /* 背景# */
            color: white;         /* テキストカラー */
            text-align: center;   /* テキストを中央に配置 */
            padding:0;      /* 上下のパディング */
            z-index: 1000;        /* 他のコンテンツよりも上に表示 */
        }

        /* コンテンツがヘッダーバナーに重ならないようにするためのスタイル */
        body {
            padding-top: 60px; /* ヘッダーバナーの高さ分だけ余白を作る */
        }
        /* バナーのスタイル */
        #fixed-banner {
            position: fixed;      /* 固定表示 */
            bottom: 0;            /* 画面下部に固定 */
            left: 0;              /* 左端に固定 */
            width: 100%;          /* 横幅を画面いっぱいにする */
            background-color: #rgba(0, 0, 0, 0); /* 背景色 */
            color: white;         /* テキストカラー */
            text-align: center;   /* テキストを中央に配置 */
            padding: 0;      /* 上下のパディング */
            z-index: 1000;        /* 他のコンテンツよりも上に表示 */
        }
    </style>
</head>

<body>
    <!-- headerバナーのHTML -->
    <div id="header-banner">
        <a href="https://バナーからの遷移先URL"><img src="http://header_beaner.png" alt="Banner Image" /></a>
    </div>

<!-- footerバナーのHTML -->
    <div id="fixed-banner">
        <a href="https://バナーからの遷移先URL"><img src="http://footer_banner.png" alt="Banner Image" /></a>
    </div>
</body>
</html>
```
# トップページで固定
トップページに固定する場合は、
WordPress内「テーマオプション」→「トップページ」の「フリースペース」にテキストで記入すると反映されます。

# 固定ページに固定
固定ページに固定する場合は、
WordPress内「固定ページ」→該当ページの「編集」→ページ内に「ブロックを追加」→「カスタムHTML」に入力すると反映されます。
※プレビュー表示はされませんが、「保存」すると確認できます。

# おわりに
ページごとにバナーを変えるプラグインは有料のものが多いですが、この方法だと無料で簡単にできるのでとてもおすすめです！
また、初心者でもカスタムしやすく、わかりやすいコードなので編集がしやすいかと思います。

少しでも参考になると嬉しいです！
【プラクティス紹介】1分でさらっと分かる「リーダーズインテグレーション」

![leader_in.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3526800/2b999d3b-1d4b-2c6f-f12d-b0e5c24ebca3.jpeg)


## プラクティス名
リーダーズインテグレーション

## プラクティスの目的・狙い
* リーダーとメンバーの一体感を醸成する（信頼関係の構築）

## どんな時に使うか
* 新任リーダーが着任した時（またはリーダが交代した時）
* リーダー自身がメンバーとの間に距離があると感じる時

:::note info
リーダー：PO、SM、テックリードなどチームのキーマンとなる人
:::

## 実施手順
1. リーダーとメンバーを会議室に集め、ファシリテーターから進め方を説明する(5分)
1. リーダーから自己紹介、抱負、目標や方針、仕事の価値観などを伝えてもらう(5分) 
1. リーダーだけ退室する
1. メンバーで下記4点について会話し、付箋に書き出してボードに貼る（10分×4）
①リーダーについて「知っていること」
②リーダーについて「知りたいこと」
③リーダーに「知っておいて欲しいこと」
④リーダー/チームのために「自分たちができること」
1. メンバーが退室し、リーダーが入室する
1. ファシリテーターが議論の流れや行間をリーダーに説明する（10分）
1. リーダーは付箋を見ながら回答を考える（10分）
1. メンバーが入室する
1. リーダーからメンバーに回答する（25分）
1. フリートークでざっくばらんに雑談する（25分）

:::note warn
時間は合計2時間で行う場合の目安です。状況や人数に応じて適宜加減して下さい。ファシリテーターは匿名性に配慮し、心理的安全性を高めるようにします。尖った質問が挙がった場合は言葉を丸めるなど建設的な方向に促しましょう。
:::

## アレンジ例
* 冒頭にアイスブレイクを入れる
* 会議終了後、そのまま懇親会になだれ込む

## アンチパターン
* 付箋を記名式にする。あとで誰が書いたかを尋ねる。
* ファシリテーターをチームのマネージャーなど役職者が務める（→場の心理的安全性が損なわれてしまうことがあるため、できればチーム外の中立者が望ましい）

## 参考情報
参考書籍１

https://www.shoeisha.co.jp/book/detail/9784798153346

参考書籍２

https://www.diamond.co.jp/book/9784478360712.html


## こぼれ話（私的コメント）
以前、チームから離任するメンバーがいる時に行う『[卒業式](https://qiita.com/kakashi_h5/items/7ae303967b516520e616)』というプラクティスを紹介しましたが、こちらはその逆で『入学式』ともいえる儀式です。
このプラクティスは新任リーダをチームに合流させる汎用的なファシリテーション手法なので、アジャイル開発に限らず（もっといえばソフトウェア開発に限らず）適用することができます。
僕のいる現場ではPOが開発期間中に変わるということがたまにあります。SMとしてはマジで勘弁して下さい、と言いたくなる状況ですが、組織の都合というものは否応なくというケースがほとんどです。そういった場合はせめて新任者がスムーズにチームに合流できるように取り計らうのもSMの務めかな、と思っています。

---
　[アジャイルプラクティス一覧へ戻る](https://qiita.com/kakashi_h5/items/20584998c5ca4594b9ea)
【大掃除】汚くなったPRをきれいにしてからレビューをしてもらおう！！

## 1. TL;DR
ソフトウェア開発では、試行錯誤の結果も重要な作業の一部です。
しかし、失敗したコードや不要な変更をProductionのcommitに残す必要はありません。

そこで、一時的なPRを作成し、履歴を残しつつもコードベースには影響を与えない方法があります。
この記事では、不要なPRを効率よく整理し、きれいな状態でレビューしてもらうための手順を紹介します。


```shell
# ただ、以下のコマンドを使ったことがある人は読まなくても問題ない記事だと思います。
git reset --soft main
```

## 2. よくある状況

1. 実装方針が固まる前に、試行錯誤しながら改修を進める。
1. 作業時間や試行ごとにgitのcommit履歴を積み重ねる。
1. その過程で、不要となった試行や変更がいくつか発生する。
1. そのままPRを出すと、無駄な変更が多く含まれ、レビューの負担が増えてしまう。


## 3. 対応方針

上記の状態に対して対応方針は２つ程度あるかと思います。

### 3.1. 方法1: 新規変更履歴はそのままに、`tig`で行単位の確認をしながらcommitを生成する

**メリット**
- 行単位でcommitを作成するため、詳細に変更内容を確認しながら整理ができる。
- 変更内容を失わずに、不要な部分だけをきれいに除去できる。
- 部分的に重要な変更を残しつつ、履歴を整理できる。

**デメリット**
- 手作業が多くなるため、大規模な変更や多くのcommitがある場合には時間がかかる。
- gitの操作に慣れていないと、commitの整理にミスが生じる可能性がある。

### 3.2. 方法2: `rebase`を使用して履歴を整理する

**メリット**
- 一括でcommit履歴を修正でき、不要なcommitをまとめたり、編集したりできる。
- コマンド一つで履歴を再構築できるため、効率が良い。
- ローカルの履歴を綺麗に整えることができ、変更の流れが一目でわかりやすい。

**デメリット**
- 間違った操作をすると、変更が失われたり、履歴が複雑になったりするリスクがある。
- `rebase`後は強制的に`push`する必要があるため、共同作業者との履歴の不整合が起こりやすい。
- 自動化された履歴の再構築により、意図していた変更や試行の記録が削除される可能性がある。


### 3.3. 今回紹介する方法

冒頭で説明したとおり、変更履歴や試行履歴も価値あるものだと考えているため、今回は`rebase`ではなく前者の方法での作業を紹介します。

## 4. 具体的な手順

まず、commit履歴が煩雑になってしまったブランチとは別に、履歴を整理するための新しいブランチを作成します。

```shell
# 汚い履歴のブランチに移動してから新しいブランチを作成
# git switch dirty-branch-name
git checkout -b new-branch-name
```

次に、整理したいブランチをベースにして、以下のコマンドで`main`などのマージ先ブランチを指定し、履歴をリセットします。

```shell
git reset --soft main
```

その後、ステージングされた変更を一旦解除します。

```shell
git restore --staged .
```

ここからは、`tig`や`git diff`、`git status`などのツールを使って変更内容を確認し、`git add`や`git commit`を使って新しいcommitを作成していきます（[tig](https://jonas.github.io/tig/doc/manual.html)を利用すると、`1`というコマンドを利用することで一行ずつ`add` できるためとても便利です。気になった方は調べてみてください）。

最後に、以下のコマンドで新しいブランチと元のブランチの差分がないか確認します。

```shell
git diff <new-branch-name> <dirty-branch-name>
```

差分がなければ、きれいなブランチを作成できたことになります。


## 5. 最後に

この方法を活用することで、作業履歴をきちんと残しつつ、Productionコードには整理されたcommitを反映させることができます。

ただし、PR内の作業内容が膨大になると、レビューする側の負担が増えることもあります。commit履歴をきれいにする前に、以下の記事も参考にしていただけると幸いです（もしcommitの整理が大変であれば、複数の関心事を含んでいる可能性があります）。

- [そのPull Requestデカすぎませんか](https://zenn.dev/nekoya/articles/adc9ec4b08e4f3)
- [Pull Request の関心事は一つにしよう | Wantedly Engineer Blog](https://www.wantedly.com/companies/wantedly/post_articles/377917)
  - アクセス日はともに2024/10/20です

PRの作成者とレビュー担当者が、お互いに快適に作業できる環境を整えていきましょう。
最後までお読みいただきありがとうございました。
テーマおよびブランド設定

### テーマおよびブランド設定

設定｜ユーザーインターフェース｜テーマおよびブランド設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/84c2a3d2-5c20-9506-cb7c-81dab8c4c5cf.png)

変更方法：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3894299/897128ef-0c2d-0c6c-8fa0-dbe99994cc07.png)
ラスパイレス指数

# ラスパイレス指数について

* 時系列データの記述の項目
* ある時点を基準として、複数の品目において、別の時点の数量（価格など）比較・評価する

# 例（ラスパイレス価格指数）
下の表では、基準時刻を$t_0$とし、比較する時刻を$t_1$とする。
それぞれの時刻で、各品目の、平均価格を $p_{ti}$、購入数量を$q_{ti}$とおく。
$i$は品目を指す番号

ラスパイレス価格指数は、
基準年$t_0$と同じ購入量を比較年$t_1$も購入した場合の、購入金額と、基準年の購入金額の比
を表す

| | 時刻($t_0$) | 時刻($t_1$) |
|:--:|:--:|:--:|
|品目0| 価格$p_{00}$, 数量$q_{00}$| 価格$p_{01}$, 数量$q_{01}$|
|品目1| 価格$p_{10}$, 数量$q_{10}$| 価格$p_{11}$, 数量$q_{11}$|
|$\dots$| | |
|品目N| 価格$p_{N0}$, 数量$q_{N0}$| 価格$p_{N1}$, 数量$q_{N1}$|


```math
ラスパイレス価格指数 = \frac{\displaystyle\sum_{i=0}^Np_{i1}q_{i0}}{\displaystyle\sum_{j=0}^Np_{j0}q_{j0}} \times 100
```
【基本情報技術者試験-CBT】合格方法 - 科目Bを効率よく解くのがコツ

## はじめに
この度、2024年10月に基本情報技術者試験を受験しまして、合格しました。
IT系の仕事をしているので元々取らなきゃなあとは思いつつ、仕事の忙しさにかまけたり教科書の分厚さに辟易しているうちに時間が過ぎ、今回やっと受けてみることにしました。

結果、2ヶ月ほどで余裕で合格することができたため、備忘録として勉強法とコツを書いておきます。

【試験結果】
- 得点(科目ABともに1000点満点で、両方600点以上で合格です)
    - 科目A： 810点
    - 科目B： 815点   

## ▼科目Aの勉強法
科目Aとは、90分60問の試験で、出題範囲がめちゃくちゃ広いです。ただ、IT系の仕事の基礎が詰まってる感じがあり、やって無駄ではなかったのかなと感じています。
基本情報技術者試験の勉強時間のうち、多くは科目Aの勉強に割くことになるのではないかと思っています。

この勉強法については、たぶん誰に聞いても同じで、
1. 知識をインプットして
2. 過去問を解いて
3. 過去問で間違えたところ、不安なところを再度インプット

を繰り返すだけです。
最終的に初見の過去問も模擬試験形式で安定して85%の正答率が出せれば、科目Aの合格は固いと思います。

1-3について、それぞれ詳細に書いていきますね。

### (1)科目AのインプットはYoutubeがいい
多くの人が参考書を買うと思いますし、私も最初買ったのですが、分厚過ぎて持ち歩くのが嫌になり、やめました。
そこでおすすめなのが「youtubeを参考書にしてしまう」です。
[【基本情報技術者試験YouTuber】すーさん](https://www.youtube.com/@kihonzyouhou/playlists) というYoutubeチャンネルがおすすめで、私はプレイリストを全部視聴することしかしてません。
各動画の最後にその動画の学習範囲の過去問が出てきて解き方を教えてくれるので、なんかできてる気分になれておすすめです。

### (2) 過去問をひたすら解く
いわずとしれた [基本情報技術者 過去問道場](https://www.fe-siken.com/fekakomon.php)を解きまくる、で良いと思います。

使い方としては、しっかりと時間をとって模擬試験モードで80問1セットで解きまくる、です。
分量としては令和2-5年の免除問題と平成28年秋-令和元年秋まで11回分を解きました。
免除問題は最近の基本情報技術者試験の傾向を掴めるので、個人的におすすめです。

### (3) 過去問で間違えた部分、不安な部分を再度インプット
(2)で不安な部分を、ネットで調べたり動画を見直したりして再度インプットします。
ここで、最初に買って読まずに積んでいた教科書が生きてきました。
動画を見直すのって相当面倒くさくて(どの動画か覚えてないし)、本の索引で調べるほうが楽だったので再インプットのフェーズでは本を活用していましたね。

なので、もう動画見て、ひたすら過去問解いていればいけます。それ以上でも以下でもないです。


## ▼科目Bの勉強法
科目Bは受ける人のプロフィールによってかなりアプローチが変わると思っています。
正直プログラムをよく書く人なら勉強しなくても良いです。

私はVBAやPythonは仕事で少し書いたりすることもあるもののガッツリ書くわけではなく、何も勉強せずにサンプル問題・公開問題を解いてみたところ、「ほとんど自力で解けるが、時間がかかる」という状態でした。おそらく、コツが何かあるのだろうと思って「[出るとこだけ！基本情報技術者 科目B](https://www.amazon.co.jp/%E6%83%85%E5%A0%B1%E5%87%A6%E7%90%86%E6%95%99%E7%A7%91%E6%9B%B8-%E5%87%BA%E3%82%8B%E3%81%A8%E3%81%93%E3%81%A0%E3%81%91%EF%BC%81%E5%9F%BA%E6%9C%AC%E6%83%85%E5%A0%B1%E6%8A%80%E8%A1%93%E8%80%85%EF%BC%BB%E7%A7%91%E7%9B%AEB%EF%BC%BD%E7%AC%AC4%E7%89%88-%E6%A9%8B%E6%9C%AC-%E7%A5%90%E5%8F%B2/dp/4798182524/ref=sr_1_1?adgrpid=148754358936&dib=eyJ2IjoiMSJ9.8NGB8iJgoYaNyuVJe1-1TXpZo5a1k6X-y6zvV7Iv3WQb9-PnymwooT74LqkZXmc-p4DAyVLv_h0GKUdC6up9h2JgmgmVLo30Ykr3yFuciNb58orw1tgqYcfK3liy6APlnDY70NC5eMy5cWHo9WYTWQ.yL6nBDFapvANys_Wv4EgfKZi2hb_QXl0fGHLwDDVPuk&dib_tag=se&hvadid=679099968620&hvdev=c&hvlocphy=1009311&hvnetw=g&hvqmt=e&hvrand=10389117391998113623&hvtargid=kwd-2024717686733&hydadcr=26638_11789321&jp-ad-ap=0&keywords=%E5%87%BA%E3%82%8B+%E3%81%A8%E3%81%93+%E3%81%A0%E3%81%91+%E5%9F%BA%E6%9C%AC+%E6%83%85%E5%A0%B1+%E6%8A%80%E8%A1%93+%E8%80%85+%E7%A7%91%E7%9B%AE+b&qid=1729397479&sr=8-1)」という参考書を読んだことで、トレースという概念に出会いました。

トレース自体は、問題を解く正確性を上げるのには必要ですし、知って良かったと思っています。
しかし、いかんせん正直に上から下まで全問トレースしていると時間切れになってしまうため、トレース一本で合格を確実なものにすることは難しいです。

### 科目Bを制限時間内に解き切るために
科目Bで時間がかかるのは、20問中16問を占めるアルゴリズム問題だと思います。
効率の良いアルゴリズム問題の解き方としては、

1. 問題文最初のプログラムの趣旨をしっかりと読み、理解する
2. どういった処理をやっていそうかを想像する(選択肢は読まない)
3. 2を踏まえて、プログラムを上から下まで眺める(2と乖離していたら大人しくトレースしましょう)
4. 理解できない部分があればトレースをして、処理が理解できた時点でトレースをやめて、解答する

になるのかなと思っています。
これで、3分残した状態で無事全問解き切ることができました。
解いている間に3までできれば、大体選択肢は2-3択に絞れると思うので、最悪分からなくてもそれで埋めてしまいましょう。

## 最後に
範囲は広いですが、勉強すれば誰でも取れる資格だと思います。
これから試験を受ける方は参考にしてみてください。
【Laravel】テーブル変更（カラム追加）

運用中のテーブルに対し、
カラムを追加する際の流れについて説明します
## マイグレーションファイルの作成
下記コマンドで、マイグレーションファイルを作成します
~~~
php artisan make:migrattion add_new_column_to_books_table --table=books
~~~
コマンド内容は、
`php artisan make:migration`  `ファイル名` `--table=テーブル名`
これで __database/migrations__ の中に __作成日時_ファイル名.php__ が作成されます
## マイグレーションファイルの編集
database/migrations の中に作成されているので編集します
~~~database/migrations/2024_10_20_000000_add_new_column_to_books_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::table('books', function (Blueprint $table) {
            $table->string('author', 10)->nullable();
            $table->date('release_date')->nullable();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        $table->dropColumn('author');
        $table->dropColumn('release_date');
    }
};

~~~
## マイグレーションファイル内容をDBに反映
ファイルの編集が終了したら、
下記コマンドでデータベースにファイル内容を反映します
作成したファイル内の`up()`が実行されます
~~~
php artisan migrate
~~~
データベースを確認するとbooksテーブルに
__author__ と __release_date__ が追加されています

内容を修正する場合は、
修正前に下記コマンドでテーブル作成前に戻します
作成したファイル内の`down()`が実行されます
~~~
php artisan migrate:rollback
~~~
修正後、再度下記コマンドででデータベースへファイル内容を反映
~~~
php artisan migrate
~~~
以上、運用中のテーブルへのカラム追加となります
Next.jsのglobals.cssを読み解く

``create-next-app``でNext.jsのプロジェクトを作成すると、``globals.css``にはデフォルトで次のような記述があります。この記事では、これらの意味を読み解き、自分でカスタマイズすることができるようになります。

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
```

## 解説

### 1. Tailwind CSSに関する部分

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

この3行は、Tailwind CSSを使うための基本的な設定です。それぞれ以下のような役割があります：

1. **`@tailwind base`**: Tailwind CSSのリセットスタイル（基本のスタイル）が読み込まれます。ブラウザのデフォルトスタイルをリセットするためのものです。
2. **`@tailwind components`**: 自分で定義した**コンポーネントスタイル**が読み込まれます。
    
    
    **※ コンポーネントスタイルとは**
    
    TailwindCSSでは「カード」や「ボタン」など、よく使うスタイルをまとめて一つのクラスにまとめることができます。それを「コンポーネントスタイル」といいます。コンポーネントスタイルを定義するには、`@layer components{}` というディレクティブを使います。
    
    ```css
    //globals.css
    
    @layer components {
      .btn-primary {
        background-color: #3490dc;
        color: white;
        padding: 0.5rem 1rem;
        border-radius: 0.25rem;
        font-weight: bold;
        transition: background-color 0.3s;
      }
    
      .btn-primary:hover {
        background-color: #2779bd;
      }
    }
    ```
    
    これにより、簡単にボタンのスタイルを当てることができます。
    
    ```tsx
    <button class="btn-primary">Click Me!</button>
    ```
    <br/>


3. **`@tailwind utilities`**: `text-center`や`bg-gray-500`といった通常のユーティリティクラス読み込むためのものです。

### 2. CSS変数とテーマ切り替えに関する部分

```css
:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}
```

ここでは、CSS変数（カスタムプロパティ）を使って、背景色と文字色を設定しています。フォアグラウンドとは、「手前にあるもの」という意味で、ここでは文字色として使われます。

- **`:root`**: ルートタグである`html`タグの中で、`-background`と`-foreground`というCSS変数（カスタムプロパティ）を定義しています。初期値として背景色は白、文字色は黒です。
- **`@media (prefers-color-scheme: dark)`**: デバイスのOSがダークモードになっている場合に適用されるスタイルを指定します。背景色は黒、文字色は白です。

### 3. bodyのスタイル

```css
body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}
```

ルート要素で定義したCSS変数を`var()`を使って呼び出し、文字色と背景色を定義します。また、フォントも定義しています。

- **`color: var(--foreground);`**: 文字色をCSS変数`-foreground`で設定します。
- **`background: var(--background);`**: 背景色をCSS変数`-background`で設定します。
- **`font-family: Arial, Helvetica, sans-serif;`**: フォントファミリーを指定しています。

### 4. ユーティリティクラスの追加

```css
@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}
```

- **`@layer utilities`**: これはTailwind CSSのユーティリティレイヤー（普通のクラスたち）に新しいクラスを追加しています。グローバルに使いたい場合は、`tailwind.config.ts`ファイルでも同様に新しいクラスを定義することができますが、`@layer utilities` は読み込んだCSSにしか反映されないので、一部のコンポーネントにスコープを制限することができます。
- **`.text-balance`**: テキストの折り返しに関する `text-wrap: balance;`という新しいクラスを定義しています。例えば、
    
    ```tsx
    <p class="text-balance">文章</p>
    ```
    
    とかくと、テキストがバランスよく折り返されることになります。

<br/>

ぜひご参照ください！