OmniAICreator/Qiita-1.07M huggingface dataset:
【最速】自宅Ubuntu ServerでWebサーバを構築

# 目的
Webサーバを構築し、簡単なページを表示する

# 環境
- Ubuntu Server22.04 TLS
- Apache/2.4.52
# 手順
1\. Webサーバソフト「Apache HTTP Server」のインストール
2. ドキュメントルート下にHTMLページを作成

# 実践
###  ①　Apacheのインストール

以下のコマンドを順に打つ

`$ sudo apt update` 
`$ sudo apt -y install apache2`

Apacheのインストールが完了したら、同じネットワーク内にある機器から、ブラウザでサーバのローカルIPアドレス（取得済みドメインでも可）にアクセスする
成功していればブラウザ上でApacheのデフォルトページが表示される↓
![スクリーンショット 2023-05-18 103756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3418025/5aed6db2-b2ca-3e10-b720-ac87331a243c.png)

### ②HTMLファイルの作成
次にドキュメントルートにHTMLファイルを作成する
**ドキュメントルート**とは、Webコンテンツを配置するディレクトリのことである
ブラウザのアドレスバーで「http://Ubuntu ServerのローカルIPアドレス/」と指定したとき表示されるのが、ドキュメントルート上のファイルになる

先ほど開いたApacheのデフォルトページがその実例である

Ubuntu Server用のApacheのドキュメントルートは、初期設定では「/var/www/html」に設定されている

実際にルートを確認してみる

`$ cd /var/www/html`
`$ ls`

と打つと「index.html」というファイルがあることがわかる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3418025/b1e1f007-1bd1-9a6f-7d9e-78803b6aecfc.png)


つまり、この「index.html」がApacheデフォルトページであり、「http://Ubuntu ServerのローカルIPアドレス/」にアクセスすると「var/www/html/index.html」とルートをたどっていることがわかる

このまま「index.html」を編集しても問題はないが、本記事では新たにHTMLファイルを作ろうと思う

`$ sudo touch test.html`

新たにファイルを作成（名前は任意）

今回は「test.html」とした

`$ sudo nano test.html`

ファイルに書き込む
（私はnanoエディタを使用）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3418025/e88d1bd5-e9ef-0426-2cc2-8f54bf6f22c5.png)
HTMLに関しては全くの素人の私はこのように記述した

保存したあと、ブラウザで「http://Ubuntu ServerのローカルIPアドレス/test.html」にアクセスすると、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3418025/528cfa52-e768-1679-6965-8eb8879371ac.png)
このように表示された

成功である

# 最後に
今回は極めて簡単なページを作成したが、サーバにWebフレームワークなどを入れてApache連携させれば更にフレキシブルなWebサイトになるし、Wordpressを入れてしまうのも手である。

次は実際に構築したWebサイトをインターネットで公開する方法を記事にしようと思う。
(リンクだけです)「ミニマックス法（英:Minimax）」を調べた。

https://www.deepl.com/ja/translator#ja/en/非常に奥が深そうなので、さわりだけにしました.

# wikipedia

https://ja.wikipedia.org/wiki/%E3%83%9F%E3%83%8B%E3%83%9E%E3%83%83%E3%82%AF%E3%82%B9%E6%B3%95

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

# WolframAlphaで

https://www.google.com/search?q=minimax+wolfram+algorithm&rlz=1CAUHAM_enJP1038JP1038&ei=Jo1lZPiuB8yRoAS0o67IDg&ved=0ahUKEwj42Yvo6P3-AhXMCIgKHbSRC-kQ4dUDCA8&uact=5&oq=minimax+wolfram+algorithm&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQogQyBQgAEKIEMgUIABCiBDIFCAAQogQ6CAgAEKIEELADOggIABAIEAcQHjoECAAQHjoGCAAQCBAeSgQIQRgBUKQpWJ1qYONzaAVwAHgAgAG4AYgBkBSSAQQwLjIwmAEAoAEByAECwAEB&sclient=gws-wiz-serp

# sympyで

https://www.google.com/search?q=minimax+algorithm+sympy&rlz=1CAUHAM_enJP1038JP1038&ei=TI1lZKz6DcOMoATmuaaQDg&ved=0ahUKEwis0KH66P3-AhVDBogKHeacCeIQ4dUDCA8&uact=5&oq=minimax+algorithm+sympy&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQAzIFCAAQogQyBQgAEKIEMgUIABCiBDIFCAAQogQ6CggAEEcQ1gQQsAM6CAgAEAUQHhANOgoIABAFEB4QDRAPSgQIQRgAUOcfWJ86YOFBaAFwAXgAgAGeAYgBvQ2SAQQwLjEzmAEAoAEByAEKwAEB&sclient=gws-wiz-serp

# 参考
Pythonによる機械学習: AdaBoost、Gradient Boosting、Stochastic Gradient Boostingの解説と実装

# はじめに
本記事では、機械学習の重要なアルゴリズムである「AdaBoost」、「Gradient Boosting」、「Stochastic Gradient Boosting（SGB）」について、その理論とPythonによる実装例を通じて解説します。それぞれを回帰タスクと分類タスクの両方に対応した形で説明します。これらのアルゴリズムを理解し、実践的に活用することで、様々なデータセットに対する予測精度を高めることができます。

## 1. AdaBoost
### 1.1 理論
AdaBoost (Adaptive Boosting)は、弱学習器を逐次的に訓練して最終的な強学習器を作成するアンサンブル学習法です。各弱学習器は前の学習器が誤分類したデータに対して重点を置き、これにより全体としての性能を向上させます。

### 1.2 実装例
1.2.1 分類タスク
```
from sklearn.ensemble import AdaBoostClassifier
from sklearn.datasets import make_classification

# データ生成
X, y = make_classification(n_samples=1000, n_features=20, random_state=42)

# AdaBoostの設定と学習
clf = AdaBoostClassifier(n_estimators=100, random_state=42)
clf.fit(X, y)

# 予測
predictions = clf.predict(X)
```
1.2.2 回帰タスク
```
from sklearn.ensemble import GradientBoostingRegressor
from sklearn.datasets import make_regression

# データ生成
X, y = make_regression(n_samples=1000, n_features=20, random_state=42)

# Gradient Boostingの設定と学習
regr = GradientBoostingRegressor(n_estimators=100, random_state=42)
regr.fit(X, y)

# 予測
predictions = regr.predict(X)
```

## 3. Stochastic Gradient Boosting（SGB）
### 3.1 理論
Stochastic Gradient Boosting（SGB）は、通常のGradient Boostingにランダム性を導入したバージョンです。各弱学習器が訓練する際にランダムに選ばれた一部のデータセットを使います。これによりモデルのバリアンスが減少し、過学習を防ぐ効果があります。

### 3.2 実装例
3.2.1 分類タスク
```
from sklearn.ensemble import GradientBoostingClassifier
from sklearn.datasets import make_classification

# データ生成
X, y = make_classification(n_samples=1000, n_features=20, random_state=42)

# Stochastic Gradient Boostingの設定と学習
# subsampleパラメータを<1.0に設定することでSGDとなる
clf = GradientBoostingClassifier(n_estimators=100, subsample=0.8, random_state=42)
clf.fit(X, y)

# 予測
predictions = clf.predict(X)
```
3.2.2 回帰タスク
```
from sklearn.ensemble import GradientBoostingRegressor
from sklearn.datasets import make_regression

# データ生成
X, y = make_regression(n_samples=1000, n_features=20, random_state=42)

# Stochastic Gradient Boostingの設定と学習
# subsampleパラメータを<1.0に設定することでSGDとなる
regr = GradientBoostingRegressor(n_estimators=100, subsample=0.8, random_state=42)
regr.fit(X, y)

# 予測
predictions = regr.predict(X)
```
以上でAdaBoost、Gradient Boosting、Stochastic Gradient Boostingの基本的な理論とPythonによる実装例の解説を終わります。これらのアルゴリズムは、データの特性や問題設定により適切に選択・調整することが重要です。

それぞれのアルゴリズムが持つ特性と、それぞれの適用場面を理解することで、機械学習モデルの精度を一段と向上させることが可能となります。
【Xcode エラー】「Anonymous closure argument not contained in a closure」【解決法】

とあるUdemyのSwift講座のコードを模写していたら

以下の画像のように
「Anonymous closure argument not contained in a closure」
といったエラーが発生した。

![スクリーンショット 2023-05-18 11.21.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359201/b8432e0a-caac-817e-f5ae-8c5110f2afd1.png)

#### 【原因】
本来は「{}」を使うべきなのだが{}ではなく()を使っていたので発生した模様。

#### 《参考記事》[Swift]配列をソートしようとしたらerror: anonymous closure argument not contained in a closureが出た
https://note.com/simd_float4x4/n/nefe212cea8ef
Git スタッシュで作業を保存しておく

# スタッシュはいつ使うの？
作業が途中でコミットしたくないけど、別のブランチに移って作業したい...そんなときに、ワークツリーの内容を一時的に保存しておくのがスタッシュ

# 使い方
```terminal
# 作業を一時保存する
$ git stash
```
注意として、新規ファイルを作成してまだステージしていない場合は、そのファイルはGitの管理下にないので、一時保存されない。ステージしてからスタッシュするようにしよう。

```terminal
# 一時保存した作業一覧を確認する
$ git stash list
```
```terminal
# 最新の作業を復元する
$ git stash apply
# ステージの状況も含めて、最新の作業を復元する
$ git stash apply --index

# 特定の作業を復元する
$ git stash apply <スタッシュ名>
```
スタッシュ名は`stash@{1}`などの文字列である。
```terminal
# 最新の作業を削除する
$ git stash drop

# 特定の作業を削除する
$ git stash drop <スタッシュ名>

# 全作業を削除する
$ git stash clear
```

# 試してみよう
```terminal
$ git checkout master
# ブランチを切っておく
$ git branch hotfix
# ファイルに変更を加える
$ echo hoge > hoge.txt
$ git add hoge.txt
# ファイルをスタッシュする
$ git stash
Saved working directory and index state WIP on master: 6f77a05 create hoge.txt
# 一覧を確認する
$ git stash list
stash@{0}: WIP on master: 6f77a05 create hoge.txt
# ブランチを切り替えて戻ってくる
$ git checkout hotfix
Switched to branch 'hotfix'
$ git checkout master
Switched to branch 'master'
```
ここで`ls`コマンドを実行して、`hoge.txt`がないことを確認しておこう。

続き
```terminal
$ git stash apply
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        new file:   hoge.txt

```
再度`ls`コマンドを実行して、`hoge.txt`が復元されたことを確認しよう。

ここまできたら、保存した作業はいらないので削除しておこう。
```terminal
$ git stash clear
# 作業一覧を確認（何も表示されなければ成功）
$ git stash list
```
【Swift】UITabBarに表示したシンボルイメージの位置をずらす方法

通常の場合、`UITabBarItem`の画像の表示位置をずらす方法として、`imageInsets`を変更する方法があります。
```swift
tabBarItem.imageInsets = UIEdgeInsets(top: 10, left: 0, bottom: -10, right: 0)
```
しかし、`SF Symbols`のシンボルイメージだとこの方法で位置をずらせなかったため、調べた方法を共有したいと思います。
## .withBaselineOffset(fromBottom: CGFloat)
```swift
let houseImage = UIImage(systemName: "house.fill")?.withBaselineOffset(fromBottom: 10)
let tabBarItem = UITabBarItem(title: nil, image: houseImage, tag: 0)
```
シンボルイメージに`.withBaselineOffset(fromBottom: 10)`を設定することで、画像を下に10ずらすことができます。
今回は画像のみ表示したいので`title`は`nil`にしています。

また、`.withConfiguration(UIImage.SymbolConfiguration(weight: .bold))`などでシンボルイメージのサイズやweightを変えることもできます。

## 参考
https://stackoverflow.com/questions/60843359/uiedgeinsets-not-working-on-system-images-in-tabbar
(リンクだけです)「A*（A-star、エースター）探索アルゴリズム（英:A* search algorithm）」を調べた。

https://www.deepl.com/ja/translator#ja/en/非常に奥が深そうなので、さわりだけにしました.

# wikipedia
(リンクタブの小技:後ろに全角スペースをつけました。)
日本語版

https://ja.wikipedia.org/wiki/A*　

https://en.wikipedia.org/wiki/A*_search_algorithm

# WolframAlphaで

https://www.google.com/search?q=a-star+wolfram+algorithm&rlz=1CAUHAM_enJP1038JP1038&ei=GohlZIWFBsmd-AaamaigBg&oq=A-star+wolfram+alg&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQARgAMgUIIRCgATIECCEQFToICAAQogQQsANKBAhBGAFQowdYowdgzRtoAXAAeACAAZIBiAGSAZIBAzAuMZgBAKABAcgBA8ABAQ&sclient=gws-wiz-serp

# sympyで

https://www.google.com/search?q=a-star+algorithm+sympy+&rlz=1CAUHAM_enJP1038JP1038&ei=d4hlZLjpD9GK-Qb2kq_gDQ&ved=0ahUKEwj4gLes5P3-AhVRRd4KHXbJC9wQ4dUDCA8&uact=5&oq=a-star+algorithm+sympy+&gs_lcp=Cgxnd3Mtd2l6LXNlcnAQA0oECEEYAFAAWABgAGgAcAB4AIABAIgBAJIBAJgBAA&sclient=gws-wiz-serp

# 参考本

https://www.amazon.co.jp/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD-%E7%AC%AC2%E7%89%88-%E6%83%85%E5%A0%B1%E5%B7%A5%E5%AD%A6%E5%85%A5%E9%96%80%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E8%8F%85%E5%8E%9F-%E7%A0%94%E6%AC%A1/dp/4627803028


https://www.amazon.co.jp/%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD%E5%8E%9F%E7%90%86-%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%82%B5%E3%82%A4%E3%82%A8%E3%83%B3%E3%82%B9%E6%95%99%E7%A7%91%E6%9B%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-12-%E5%8A%A0%E7%B4%8D-%E6%94%BF%E8%8A%B3/dp/433902712X/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=1SUJRZ7AWE5AW&keywords=%E5%8A%A0%E7%B4%8D+%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD%E5%8E%9F%E7%90%86&qid=1684907579&s=books&sprefix=%E5%8A%A0%E7%B4%8D+%E4%BA%BA%E5%B7%A5%E7%9F%A5%E8%83%BD%E5%8E%9F%E7%90%86%2Cstripbooks%2C356&sr=1-1

https://www.amazon.co.jp/%E3%83%91%E3%83%BC%E3%82%BB%E3%83%97%E3%83%88%E3%83%AD%E3%83%B3-M-L-%E3%83%9F%E3%83%B3%E3%82%B9%E3%82%AD%E3%83%BC/dp/4893621106/ref=sr_1_1?keywords=%E3%83%91%E3%83%BC%E3%82%BB%E3%83%97%E3%83%88%E3%83%AD%E3%83%B3+%E3%83%9F%E3%83%B3%E3%82%B9%E3%82%AD%E3%83%BC&qid=1684907718&s=books&sprefix=%E3%83%91%E3%83%BC%E3%82%BB%E3%83%97%E3%83%88%E3%83%AD%E3%83%B3+%2Cstripbooks%2C305&sr=1-1
ROC曲線とAUCを理解しよう - Python実装入門

# はじめに
ROC曲線とAUCは、機械学習の分類問題を評価するための重要なツールです。しかし、これらの概念を理解するのは少し難しく感じるかもしれません。この記事では、これらの概念を分かりやすく説明し、Pythonを使って実装する方法を示します。

# ROC曲線とは？
ROC曲線（Receiver Operating Characteristic curve）は、分類器のパフォーマンスを視覚的に示すためのグラフです。ROC曲線を作成するためには、偽陽性率（FPF）を横軸に、真陽性率（TPF）を縦軸にプロットします。

- 真陽性率（TPF）: 実際に陽性であるサンプルを陽性と正しく予測した割合（敏感度または再現率とも呼ばれます）。
- 偽陽性率（FPF）: 実際には陰性であるサンプルを陽性と誤って予測した割合（1から引いたものが特異度です）。
- AUCとは？
AUC（Area Under the Curve）は、ROC曲線の下の領域の面積を指します。AUCは0から1までの値を取り、値が大きいほど（つまり、1に近いほど）分類器の性能が良いことを示します。

# Pythonでの実装
Pythonでは、scikit-learnとmatplotlibを使ってROC曲線とAUCを簡単に計算・描画することができます。

```
from sklearn.datasets import make_classification
from sklearn.model_selection import train_test_split
from sklearn.metrics import roc_curve, roc_auc_score
from sklearn.linear_model import LogisticRegression
import matplotlib.pyplot as plt

## データ生成
X, y = make_classification(n_samples=1000, n_features=20, n_classes=2, random_state=42)
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)

## モデル学習
model = LogisticRegression()
model.fit(X_train, y_train)

## 予測値の取得
y_scores = model.predict_proba(X_test)[:, 1]

## ROC曲線の描画
fpr, tpr, thresholds = roc_curve(y_test, y_scores)
plt.plot(fpr, tpr, label='ROC curve (area = %.2f)'%roc_auc_score(y_test, y_scores))
plt.plot([0, 1], [0, 1], linestyle='--')
plt.xlim([0.0, 1.0])
plt.ylim([0.0, 1.0])
plt.xlabel('False Positive Rate')
plt.ylabel('True Positive Rate')
plt.title('Receiver Operating Characteristic')
plt.legend(loc="lower right")
plt.show()
```
上記のコードは、2クラス分類問題に対するROC曲線を描画する例です。まず、データセットを生成し、それを訓練データとテストデータに分割します。次に、モデルを訓練し、テストデータに対する予測値を取得します。最後に、roc_curve関数を使用してROC曲線を描画し、roc_auc_score関数でAUCを計算します。

# まとめ
この記事では、ROC曲線とAUCの基本的な概念と、それらをPythonで計算・描画する方法を説明しました。これらのツールは、モデルの性能を理解し、異なるモデルを比較するのに非常に便利です。
【Road to Cassandra Day】Cassandra リアクティブ スタイル プログラミング~高度なトピック ①バックプレッシャー

# はじめに

## Cassandra Day Tokyo

今年、2023年６月１日に、[Cassandra Day](https://www.datastax.com/events/cassandra-day-japan)が日本でも開催されます。
Cassandra Dayは、昨年、ベルリン、ロンドン、アムステルダム、ハノイ、ジャカルタ、ヒューストン、サンタクララ、シアトル、シンガポールでも開催されました。

今回の東京での開催に向けて、Apache Cassandraに関する記事を発表していきます。

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/176567/6a879803-d135-348b-f815-08be011607fa.png)](https://www.datastax.com/events/cassandra-day-japan)

## Apache Cassandraについて

Apache Cassandraとは、一言でいうなら、オープンソースの分散データベース管理システムです。

他の分散データベース管理システム同様、複数の汎用サーバーを用いて、ひとつのデータベースを構築します（開発などの目的のため、一つのサーバーのみで構成することも可能です）。

ここでは、詳しい説明は割愛し、興味のある方へのご紹介の役割は、公式サイトやWikipediaに譲ります。

https://cassandra.apache.org/_/index.html

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

# Cassandra リアクティブ スタイル プログラミング

本稿の内容は、以下のドキュメントを元にしています。

https://docs.datastax.com/en/developer/java-driver/4.15/manual/core/reactive/#advanced-topics


Cassandra リアクティブ スタイル プログラミングの紹介と基本的な使い方については、本稿執筆者による以下の記事を参照ください。

https://qiita.com/yoshiyuki_kono/items/c66763c389e88578ca18

## 高度なトピック
### バックプレッシャー
リアクティブ プログラミングの重要な機能の 1 つに、バックプレッシャーがあります。

残念ながら、Cassandra ネイティブ プロトコルは、ネットワークを介したクライアントとサーバー間のバックプレッシャー情報の交換を適切にサポートしていません。
バージョン 3.10 以降、Cassandra はクライアントを（暗黙的に）抑制します。
一方で、リアクティブ プログラミングのコンテクストでのバックプレッシャーのメカニズムはありません。

ただし、Cassandra からのデータの読み取りにおいて、このことはほとんどのアプリケーションで問題になることはないと言えるでしょう。

実際、読み取りシナリオでは、Cassandra はプロデューサーとして機能し、ドライバーはコンシューマーです。このようなセットアップでは、ダウンストリームのサブスクライバーがスループットに対応できない場合、ドライバーはサーバーからページを要求するレートを徐々に調整します。そのことによって、サーバーのスループットが調整され、サブスクライバーのスループットに一致されます。
唯一の注意点は、サブスクライバーが非常に遅い場合、クエリ タイムアウトをトリガーする可能性があることです(クライアント側 は`DriverTimeoutException`、サーバー側  `ReadTimeoutException` )。

Cassandra に書き込む場合、クライアントとサーバー間のバックプレッシャー通信の欠如がより問題になります。
実際、書き込みシナリオでは、ドライバーはプロデューサーとして機能し、Cassandra はコンシューマーです。このようなセットアップでは、アップストリーム プロデューサーが生成するデータが多すぎる場合、ドライバーはやみくもに書き込みステートメントをできるだけ早くサーバーに送信し、最終的にクラスターが過負荷になるか、クラッシュすることさえあります。これは通常、`WriteTimeoutException`、または `OverloadedException`といったエラーで表面化します。

書き込みが集中するシナリオでは、書き込みステートメントが実行される同時実行数を制限することを強くお勧めします。これを実現する簡単な方法は、`flatMap`メソッドを使用することです。ほとんどのリアクティブ ライブラリでは、`flatMap`メソッドは、同時実行数を制御するパラメータを受け取る形式になっています。

次の例では、Reactorライブラリの`flatMap`で、 `concurrency`パラメーター（二つ目の引数）を利用して、最大同時実行数 10 でステートメントのフローを実行します。

```java
Flux<Statement<?>> stmts = ...;
stmts.flatMap(session::executeReactive, 10).blockLast();
```

上記の例では、`flatMap`は同時に最大 10 並列で、`ReactiveResultSet` のインスタンスにサブスクライブします。実行中の同時要求数は、10 個に制限します。
通常、データの書き込みが速すぎるのを防ぐには、これで十分です。
より高度な実装では、フローの実行をレート制限またはスロットリングできる場合があります。たとえば、Reactor は、アップストリーム パブリッシャーのスループットをレート制限するメソッド `delayElements`を提供します。詳細については、ライブラリのドキュメントを参照してください。

最後の手段として、たとえばドライバーの組み込みの要求スロットリングメカニズムを使用して、ドライバー レベルで同時実行を制限することも考えられます。ただし、これは通常、リアクティブ アプリケーションでは必要ありません。いくつかの例については、開発者ガイドの「Managing concurrency in asynchronous query execution（非同期クエリ実行での同時実行の管理）」を参照してください。

https://docs.datastax.com/en/dev-app-drivers/docs/managingConcurrency.html
Reactプロジェクトで画面から特定のソースコードを探す方法【初心者向け】

## はじめに
大規模なReactプロジェクトで作業する際、特定の画面や機能に対応するソースコードを素早く見つけることは一般的な課題です。以下にその解決策をいくつか紹介します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/f6db0cc0-509c-af34-3111-9e36ec7e3082.png)


## 1. コンポーネント名を探す

コンポーネント名は、そのコンポーネントのソースコードを検索する最も直接的な手がかりとなります。ブラウザの開発者ツールを開き、要素の検証を行うことでReactコンポーネントの名前を見つけることができます。

## 2. React Developer Toolsを使う

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)は、Reactコンポーネントのツリーと各コンポーネントのpropsやstateを視覚化することができるChromeとFirefoxの拡張機能です。これを使用すると、アクティブなコンポーネントのソースコードを直接開くことができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/987057/c65bf828-3a50-0690-6f6d-0056a8eecb1f.png)

## 3. コードエディタの全文検索を使用する

VS CodeやSublime Textなどのモダンなコードエディタには、プロジェクト全体を検索する機能があります。画面に表示されるテキストやエラーメッセージなどをこの機能で検索することで、該当するソースコードを見つけることができます。

## 4. コードベースの構造を理解する

Reactプロジェクトは通常、特定のパターンに従って構造化されます（例えば、機能ごと、ルートごとなど）。プロジェクトの構造を理解することで、特定の機能やビューに関連するコードを見つけやすくなります。

## 5. コードコメントとドキュメンテーションを利用する

良いコードベースには、各ファイルやコンポーネントの目的を説明するコメントやドキュメンテーションが含まれています。これらの情報は、ソースコードの特定に役立つ場合があります。

## まとめ

Reactプロジェクトで特定のソースコードを見つけるための方法は複数あります。適切なツールを使用し、プロジェクトの構造を理解し、全文検索を活用することで、効率的に目的のソースコードを探し出すことができます。また、良好なドキュメンテーションとコードコメントは、このプロセスを大いに助けてくれます。

最後に、Reactのコードベースには一貫したパターンがあることを忘れないでください。プロジェクトの構造を理解することは、特定の機能やビューに関連するコードを見つけるための大きな手がかりとなります。
JMapepr利用方法

## セットアップ

依存関係に以下を追加してください

CR2です。versionに注意してください。

```<!--JMapper-->
<dependency>
       <groupId>com.googlecode.jmapper-framework</groupId>
       <artifactId>jmapper-core</artifactId>
       <version>1.6.1.CR2</version>
</dependency>
```

## 利用方法

1.マッピングしたいBeanとマッピング元のBeanを作成
マッピング元

```
public class DToVCsvReadEntity {
    
    private long id;
    
    private String email;
}
```

マッピング先

```
public class DToVChangeValueEntity {
    @JMap
    private long id;

    @JMap("email")
    private String username;
}
```

2.下記の関数を用いマッピングを行う(元:DToVCsvReadEntity、対象:DToVChangeValueEntity)

```
JMapper<DToVChangeValueEntity,DToVCsvReadEntity> EntityMapper = new JMapper<>(DToVChangeValueEntity.class,DToVCsvReadEntity.class);
```

マッピング元と対象のBenaの変数名が一致している場合、そのままマッピングできます。
マッピング元と対象のBeanの変数名が一致していないものをマッピングしたい場合、以下のように記述します。

```
@JMap("hoge")
```

### 別の値に変換するなど、処理をBEAN内部に書きたい場合は以下を利用

```
@JMap
private String dateOfReceipt;
@JMapConversion(from={"dateOfReceipt"},to= {"dateOfReceipt"})
    public String upDatetimeTransrateDateOfReceipt(LocalDate dateOfReceipt) {
        String upDatetimeString = dateOfReceipt.format(DateTimeFormatter.ofPattern("yyyy/MM/dd"));
        return upDatetimeString;
    }
```

### マッピングする値を別のマッピングする値に変える処理を行いたい場合

```マッピング元のBEAN
    private Integer mileage;
    
    
    public Integer mileageTransrate() {
        if(mileage<=0) {
            return MileageMile;
        }
        else {
            return mileage;
        }
    }
```

```マッピングするBEAN
    @JMapAccessor(name="mileage",get="mileageMileTransrate")
    @JMap("mileage")
    private Integer mileageMile;
```

get内の関数が動いてからマッピングされる。

↓こんな感じで一つのマッピング元から複数に分けることもできます。

```
String a
@JMapConversion(from={"hoge","","}, to={"1"})
    public int conversion(LocalDate birthDate){
    
    	String a=birthDate+1;
    	
    	
        return Period.between(birthDate, LocalDate.now())
          .getYears();
    }

@JMapConversion(from={"hoge"}, to={"2"})
    public int conversion(LocalDate birthDate){
    
    	String a=birthDate+1;
    	
    	
        return Period.between(birthDate, LocalDate.now()).getYears();
    }
@JMapConversion(from={"birthDate"}, to={"age"})
    public int conversion(LocalDate birthDate){
    
    	String a=birthDate+1;
    	
    	
        return Period.between(birthDate, LocalDate.now())
          .getYears();
    }

```

Java7以降で利用しようとすると、マッピング時にエラーが出力されるため、プログラムを走らせる際に
eclipseの場合、VM引数に下記の記述を加えて下さい
`VM引数に追加 --add-opens java.base/java.lang=ALL-UNNAMED`
多分これで動かせるようになるはず...

https://jmapper-framework.github.io/jmapper-core/

JMapAccessor
https://code.google.com/archive/p/jmapper-framework/wikis/CustomAccessors.wiki
google clone Part9　22 検索結果ヘッダーのアイコン、ボタン類を実装

# 概要

目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回は検索後画面のヘッダーの一部を実装します。
    左端にgoogleの画像、右端にアイコン・ボタン類を実装します。
以下画像は実装後の画面です。
![dadasdsdsdsa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0ee89350-909f-790c-4184-efa63b53345d.gif)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント

###  ディスプレイサイズ768pix以上

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/219c2f2e-2f2b-280d-126c-8a17f08ca63f.png)


### ディスプレイサイズ768以下
アイコン類にhiddenが効くので非表示になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/da4a3f4d-e0c6-8fe7-0f55-418a7e3f31fa.png)


# コード部分
## SearchHeader
```diff_jsx:SearchHeader.jsx
import Image from "next/image";
import Link from "next/link";
import SearchBox from "./SearchBox";
import { RiSettings3Line }  from "react-icons/ri";
import { TbGridDots } from "react-icons/tb";
import SearchHeaderOptions from "./SearchHeaderOptions";

export default function SearchHeader() {
  return (
+    <header className="sticky top-0 bg-white">
+        <div className="flex w-full p-6 items-center justify-between">
            <Link href={"/"}>
                <Image width="120" height="40" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"/>
            </Link>
            <div className="flex-1">
                <SearchBox />
            </div>

+            <div className="hidden md:inline-flex space-x-2">
                <RiSettings3Line className="header-icon" />
                <TbGridDots className="header-icon" />
            </div>

            <button className="bg-blue-500 text-white px-6 py-2 font-medium rounded-md hover:brightness-105 hover:shadow-md transition-all ml-2">
                Sign in
            </button>
        </div>
        <SearchHeaderOptions />
    </header>
  )
}

```




# 参考

## css

### Inline Flex

https://tailwindcss.com/docs/display

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/5bb65e83-8404-a0dc-a005-4d617ff8cf2e.png)


### flex-1

https://tailwindcss.com/docs/flex

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/906e1ef7-8492-6e13-0305-21b000ab544d.png)


## その他



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/f28717f4cf5ee8cafaa2b45f5344344a9d6f7bbf
google clone Part8　21 add footer  フッター部分を作成

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はフッターの実装を行います
左右or上限両端に要素を置きます。

![mmmmmmmmmmmmn.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e5acc4e8-0a73-7289-1edb-741bb2dc319d.gif)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント

### ディスプレイサイズ640以上
justify-betweenを使って左右両端に要素を配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/8c4bd472-4c44-3322-294a-af11a4ba8949.png)


### ディスプレイサイズ640以下
flex-colを使って要素を縦並びにします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/637dbacf-66d8-f234-2b40-eb1e0449b404.png)






# コード部分
## global.css
```diff_css:globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn {
      @apply bg-[#f8f9fa] rounded-md text-sm text-gray-800 hover:ring-1 hover:ring-gray-200 focus:outline-none active:ring-gray-300 hover:shadow-md w-36 h-10 transition-shadow;
    }
    
+    .link {
+      @apply hover:underline cursor-pointer;
+    }
}
```

## Layout
```diff_jsx:layout.jsx

import './globals.css'
import Head from './head'
import Footer from '@/components/Footer'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <Head />
      <body>
        {children}
+        <Footer/>
      </body>
    </html>
  )
}
```

## Footer
```diff_jsx:Footer.jsx
import React from 'react'

export default function Footer() {
  return (
    <footer className="">

        <div className="flex flex-col sm:flex-row justify-between items-center px-8 py-3 space-y-7 sm:space-y-0">
            <ul className="flex items-center space-x-6">
                <li className="link">About</li>
                <li className="link">Advertising</li>
                <li className="link">Business</li>
                <li className="link">How Search works</li>
            </ul>
            <ul className="flex items-center space-x-6">
                <li className="link">Privicy</li>
                <li className="link">Terms</li>
                <li className="link">Settings</li>                
            </ul>
        </div>
    </footer>
  )
}
```



# 参考

## css

### justify-between

https://tailwindcss.com/docs/justify-content

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/16929c4f-3201-bdaf-508f-40cbabe7dbbd.png)


### flex-col flex-row

https://tailwindcss.com/docs/flex-direction

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4dc44ea4-95d9-09e4-d9b8-991c4afa67e1.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/bd4c1642-8ab1-a20a-0e2c-d4d6660d9f2e.png)


## その他



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/9ebad45a95ac1507701c894fe8594a15d4252d71
google clone Part6 20 Add body 4/5 randomWordAPIを使って I`m Feeling Luckyを追加

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回は I｀m Feeling Lucky機能を追加します。
 I｀m Feeling Luckyはランダムな検索結果を表示する機能です。
以下画像はI`m Feeling Luckyを実行したときの結果です。URLにランダムな文字が入っていることを確認できます。（ページ自体は現時点では未実装）

![mmmmmmmmmm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/873e6a9d-a787-fa4b-8163-d1c1cdc26a4c.gif)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
## RandomAPIからデータを取得する
RandomAPIから取得した文字をNext.jsのuseRouteを使ってURLのパラメーターに渡します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/05c5da93-b7e1-2bd9-869f-33688d530742.png)

## ボタンのレイアウト

### ディスプレイサイズ640px 以下

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fcb01882-ea7a-3978-016a-444813341cc3.png)



### ディスプレイサイズ640px 以上

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/09bf62ad-e245-ce0a-8afe-2e6a0070fa82.png)

# コード部分
## HomeSearch
```diff_jsx:HomeSearch.jsx
"use client"
import {AiOutlineSearch} from "react-icons/ai";
import {BsFillMicFill} from "react-icons/bs";
import { useRouter } from "next/navigation";
import { useState } from "react";


export default function HomeSearch() {  
    const router = useRouter();
    const[input, setInput] = useState("");
    
    function handleSubmit(e){
        e.preventDefault();
        if(!input.trim()) return;
        router.push(`/search/web?_searchTerm=${input}`);
    }

+    async function randomSearch(){
+        const response = await fetch("https://random-word-api.herokuapp.com/word")
+            .then((res) => res.json())
+            .then((data) => data[0]);
+        if(!response) return;
+        router.push(`/search/web?searchTerm=${response}`);
+    }
    return (
    <>
        <form onSubmit={handleSubmit} className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl">
            <AiOutlineSearch className="text-xl text-gray-500 mr-3" />
            <input type="text" className="flex-grow focus:outline-none" onChange={(e) => setInput(e.target.value)} value={input}/>
            <BsFillMicFill className="text-lg"/>
        </form>

        <div className="flex flex-col space-y-2 sm:space-y-0 sm:space-x-4 justify-center sm:flex-row mt-8">
+            <button onClick={handleSubmit}  className="btn">
                Google Search
            </button>
+            <button  onClick={randomSearch} className="btn flex items-center justify-center disabled:opacity-80">
+                I am Feeling Lucky
+            </button>
        </div>
    </>
  )
}

```




# 参考

Random word API

https://random-word-api.herokuapp.com/home




Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/d5de13d70d379b1104584ef74ce8f48bcdd4ec17
google clone Part5　20 Add body   3/5 dynamicRouting使って検索結果の空ページを作成

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はNext.jsのdynamicRoutingを使って検索結果の空ページを作成します。
以下gifアニメは検索したときの様子です。

![ffffffffffffffffffffffffk.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/70d5e0c9-dde2-30d2-b33b-8596d45d3058.gif)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
next.jsのdynamicRoutingを使って検索後のURLに飛ぶようにします。
検索結果のページは未実装なので404エラーとなります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d6333544-f186-2250-15fc-dbeb077480d3.png)



# コード部分
## HomeSearch
```diff_jsx:HomeSearch.jsx
+"use client"
import {AiOutlineSearch} from "react-icons/ai";
import {BsFillMicFill} from "react-icons/bs";
+import { useRouter } from "next/navigation";
+import { useState } from "react";


export default function HomeSearch() {  
+    const router = useRouter();
+    const[input, setInput] = useState("");

+    function handleSubmit(e){
+        e.preventDefault();
+        if(!input.trim()) return;
+        router.push(`/search/web?_searchTerm=${input}`);
+    }
    return (
    <>
-        <form className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl">
+        <form onSubmit={handleSubmit} className="flex w-full mt-5 mx-auto max-w-[90%] border border-gray-200 px-5 py-3 rounded-full hover:shadow-md focus-within:shadow-md transition-shadow sm:max-w-xl lg:max-w-2xl">
            <AiOutlineSearch className="text-xl text-gray-500 mr-3" />
-            <input type="text" className="flex-grow focus:outline-none"/>
+            <input type="text" className="flex-grow focus:outline-none" onChange={(e) => setInput(e.target.value)} value={input}/>
            <BsFillMicFill className="text-lg"/>
        </form>

        <div className="">
-            <button className="btn">
+            <button onClick={handleSubmit}  className="btn">
                Google Search
            </button>
        </div>
```




# 参考




## その他

 String.prototype.trim()

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/trim

next/navigation useRouter

https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7043e942-96a5-3758-7dc1-a77e19056f74.png)



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/71473ddeb79dcbea5d08dc8f1751abed3c12f839
google clone Part3　20 Add body   1/5 Googleのロゴ画像を表示する

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はGoogleのロゴの画像を表示するよう実装します。
以下画像は実装後の結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/26aeb0e5-fbc9-b8b5-00e0-a6cd49164fc9.png)



# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
next.jsのimageコンポーネントを使って画像を表示します。
参照元のサイトの画像を使えるようにnext.config.jsで設定をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d14287a7-0521-550b-a4ee-088a315fbbae.png)


# コード部分
## app/page
```diff_jsx:page.jsx
import HomeHeader from "@/components/HomeHeader"
+import Image from "next/image";

export default function Home() {

  return (
   <>
    <HomeHeader />
+    <div className="flex flex-col items-center mt-24">
+      <Image
+            width="300"
+            height="100"
+src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png"
+          />
+    </div>
   </>
  )
}


```


## nextconfig
```diff_javascript:next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
+  images: {
+    domains: ["upload.wikimedia.org"],
+  },
}
module.exports = nextConfig
```




# 参考

Next.js Imageコンポーネント

https://nextjs.org/docs/pages/api-reference/components/image

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/24ae64ed-cc9c-3486-9256-8be536541bb3.png)



ドメインからの画像を取得する設定

https://nextjs.org/docs/app/api-reference/components/image#remotepatterns

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/9d1a0439-e808-91cf-fa7b-e9ae6f632f40.png)



## その他


Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/0fb8f9bd61eef8e41a1e66a2467f5a220b870536
google clone Part2　19 Add HomeHeader   2/2  レイアウト関係のCSSを追加する

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はヘッダー要素が横並びになるよう実装していきます。
以下画像は実装後の様子です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c5754452-3b78-8766-8ee9-36fc4a1f43cb.png)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント
## flex justify-endを使って右側に配置する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1eeb81d5-2b02-69e0-c1c0-8531d9475780.png)

## flex items-centerを使って要素を横並びに配置する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/783766d4-f231-4eb5-a09b-9ee2e1740b8d.png)


# コード部分
## HomeHeader
```diff_jsx:HomeHeader.jsx
import Link from 'next/link'
import {TbGridDots} from "react-icons/tb"

export default function HomeHeader() {
  return (
    <header className="flex justiy-end p-5 text-sm">
        <div className="flex space-x-4 items-center">
            <Link href="https://mail.google.com" className="hover:underline">
                Gmail
            </Link>
            <Link href="https://image.google.com" className="hover:underline">
                Images
            </Link>
            <TbGridDots className="bg-transparent hover:bg-gray-200 rounded-full text-4xl p-2" />
            <button className="bg-blue-500 text-white px-6 py-2 font-medium rounde-md hover:brightness-105 hover:shadow-md transition-shadow">Sign in</button>
        </div>
    </header>
  )
}
```




# 参考

## css
justify-end

https://tailwindcss.com/docs/justify-content

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/150e42c9-75f2-5dda-49ec-f542394e5bfc.png)


### flex item-center

https://tailwindcss.com/docs/align-items

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/fa0ea743-8a15-e66b-7f33-d565ca90c0a9.png)


## その他



Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/4d543766690f8e1f2eb022441702197a881903ae
google clone Part1　19 Add HomeHeader 1/2 ヘッダー　リンク　ボタン類を追加

# 概要
目次

https://qiita.com/RYA234/items/3aa9934b5dc3ae8fa9fc

今回はヘッダーのボタン類を実装します。
SigninボタンとグリッドビューボタンはUIだけの実装となります。
以下画像が実装後の結果です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7e22b07e-b0d3-0ad6-b91c-dba5b1ec555f.png)


# 開発環境

OS:Windows10
IDE:VSCode

"@next/font": "13.1.5",
"autoprefixer": "10.4.14",
"eslint": "8.39.0",
"eslint-config-next": "13.3.1",
"next": "13.3.1",
"postcss": "8.4.23",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-icons": "^4.8.0",
"tailwindcss": "3.3.2"

# 実装のポイント

アイコンはreacticonを使って実装します。
要素は縦並びになるので次回修正します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0155ad9e-e60d-3897-e989-061e3b63c1b8.png)



# コード部分
## HomeHeader
```diff_jsx:HomeHeader.jsx
import Link from 'next/link'
import {TbGridDots} from "react-icons/tb"

export default function HomeHeader() {
  return (
    <header className="">
        <div className="">
            <Link href="https://mail.google.com" className="hover:underline">
                Gmail
            </Link>
            <Link href="https://image.google.com" className="hover:underline">
                Images
            </Link>
            <TbGridDots className="bg-transparent hover:bg-gray-200 rounded-full text-4xl p-2" />
            <button className="bg-blue-500 text-white px-6 py-2 font-medium rounde-md hover:brightness-105 hover:shadow-md transition-shadow">Sign in</button>
        </div>
    </header>
  )
}
```

## src/app/page
```diff_jsx:page.jsx
import HomeHeader from "@/components/HomeHeader"

export default function Home() {

  return (
   <>
    <HomeHeader />
   </>
  )
}
```




# 参考

## css

### transparent

https://developer.mozilla.org/en-US/docs/Web/CSS/named-color#transparent

https://developer.mozilla.org/en-US/docs/Web/CSS/named-color

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/1ea8ac98-a6b2-d258-d6e7-da4cb738bdf5.png)



![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/4000b113-92d7-a84b-6582-480ee077d999.png)






## その他
react icon

https://react-icons.github.io/react-icons/search?q=tbgriddots

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a5e2bc72-23a2-eea2-ace8-083c314695bc.png)




Udemy

githubコミット分

https://github.com/RYA234/googlecone12/commit/c5e9852f47e3d9a90c4ba650d0884fc0dc72e910
google clone まとめ part1-10

# 参考講座

https://www.udemy.com/course/react-js-tutorial/learn/lecture/31192340?start=810#overview

# 一覧

## Part1　19 Add HomeHeader 1/2 ヘッダー　リンク　ボタン類を追加

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/7e22b07e-b0d3-0ad6-b91c-dba5b1ec555f.png)

https://qiita.com/RYA234/items/dd9cd7fdd0d51b6176a0

## Part2　19 Add HomeHeader 2/2 レイアウト関係のCSSを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c5754452-3b78-8766-8ee9-36fc4a1f43cb.png)

https://qiita.com/RYA234/items/d86f67ee529302a5190c

##  Part3　20 Add body   1/5 Googleのロゴ画像を表示する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/26aeb0e5-fbc9-b8b5-00e0-a6cd49164fc9.png)


https://qiita.com/RYA234/items/d3ab99ccd2ebe2370720

## Part4 20 Add body   2/5 検索バー　ボタンのUIを実装

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/a62fe04b-10be-2778-4552-d60495435333.png)

https://qiita.com/RYA234/items/e90bf16106f0b8fa19fe

## Part5　20 Add body   3/5 dynamicRouting使って検索結果の空ページを作成

![ffffffffffffffffffffffffk.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/70d5e0c9-dde2-30d2-b33b-8596d45d3058.gif)

https://qiita.com/RYA234/items/dc1d5702a1e507a17304

## Part6 20 Add body 4/5 randomWordAPIを使って I`m Feeling Luckyを追加

![mmmmmmmmmm.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/873e6a9d-a787-fa4b-8163-d1c1cdc26a4c.gif)

https://qiita.com/RYA234/items/cba5cc8b0990844cda11

## part7 20 Add body 5/5 APIのレスポンスを待っている間　ローディング画像を表示させる

![zaassasasaasazz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/ee5ce4af-66a8-e06b-95fd-08e053675971.gif)


https://qiita.com/RYA234/items/4b34fd1fd1ef0708cc68

## Part8　21 add footer  フッター部分を作成

![mmmmmmmmmmmmn.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e5acc4e8-0a73-7289-1edb-741bb2dc319d.gif)

https://qiita.com/RYA234/items/6962a930bc53a28089ce

## Part9　22 検索結果ヘッダーのアイコン、ボタン類を実装

![dadasdsdsdsa.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/0ee89350-909f-790c-4184-efa63b53345d.gif)

https://qiita.com/RYA234/items/d7598541caa43224412f


##  Part10　23 Update the search header　検索バーの実装

![zzzzzzzzxxz.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d013a313-b4db-2c48-11f2-32b258552d12.gif)


https://qiita.com/RYA234/items/bc3d1e27a8fc7c60b72f
スタートメニューからだと権限の問題で起動に失敗するアプリケーションでも、sudoを付けたショートカットを作れば大丈夫。

zuluCrypt-guiをインストールしたけれど、スタートメニューから起動すると以下のようなエラーダイアログが出て動作しない。
```
Failed To Start Helper Application
polkit file is misconfigured,
zuluPolkit executable could not be found
or pkexec failed to start zuluPolkit.
```

ターミナルからsudoを付ければ動作するけれど、毎度ターミナル叩くのも忍びない。

そこで、「/usr/share/applications」ディレクトリにある
zuluCrypt-guiのデスクトップファイル「zulucrypt-gui.desktop」をコピーし、
「Exec」句に指定したコマンドラインの先頭に「sudo」を付けた別のデスクトップファイルを作れば、
それのダブルクリックで起動できる。
```
Exec=sudo /usr/bin/zuluCrypt-gui -d %U
```

「/home/$USER/.local/share/applications」に置けば、スタートメニュー「パーソナル」に出てくる。



sudo付き実行なのでパスワードを要求されるけれど、sudoerに定義すればNOパスで実行できる。
```
$ sudo visudo /etc/sudoers.d/antixers
%users ALL=(root) NOPASSWD: /usr/bin/zuluCrypt-gui
```
BiopythonとGenBankファイル形式の基礎

BioinformaticsではPythonとそのライブラリ、Biopythonが頻繁に使用されます。ここでは、主なライブラリやモジュールの概要と、BiopythonでのGenBankファイル形式の利用例について説明します。

主なライブラリとモジュールの解説
- **Bio.pairwise2, Bio.pairwise2.format_alignment**: 二つのシーケンス間のアラインメントを計算し、その結果を整形して表示するためのモジュールです。
- **Bio.SubsMat.MatrixInfo**: 置換行列（一つのアミノ酸が進化的に別のアミノ酸に置換される確率を表す）の情報を提供します。
- **Bio.SeqIO, Bio.SearchIO**: シーケンスデータの読み書き（入出力）を扱うモジュール。多くのバイオインフォマティクスフォーマットに対応しています。
- **Bio.Seq, Bio.SeqRecord**: 生物学的シーケンス（DNA、RNA、タンパク質）を表現・操作するためのクラスです。
- **Bio.Blast.NCBIWWW, Bio.Blast.NCBIXML**: NCBI BLAST（Basic Local Alignment Search Tool）サービスとのインタラクションを可能にするモジュールです。
- **Bio.Phylo.TreeConstruction, Bio.Phylo.PhyloXML.Phylogeny, Bio.Phylo**: これらのモジュールは- Phylogenetic tree（系統樹）の構築と解析をサポートします。
- **pprint**: データ構造を人間が読みやすい形式でプリントするためのものです。

- **GenBankファイル形式**
GenBank形式は、遺伝配列データベースGenBankで使用されるテキストベースの形式です。BiopythonはGenBank形式の扱いに非常に便利です。

以下に、GenBankファイルを読み込む基本的な例を示します。
```
python
Copy code
from Bio import SeqIO

# GenBankファイルを開く
with open("example.gb", "r") as handle:
    # SeqIO.parse()を使用してレコードを読み込む
    for record in SeqIO.parse(handle, "genbank"):
        # 一部の情報を出力する
        print("ID:", record.id)
        print("Description:", record.description)
        print("Annotations:", record.annotations)
        print("Sequence length:", len(record.seq))
        print("Sequence:", record.seq)
```
上記のスクリプトは、"example.gb"というGenBankファイルを開き、各レコードのID、説明、アノテーション、配列の長さ、実際の配列を出力します。SeqIO.parse()関数は、ファイルハンドル（ここでは"handle"）とファイル形式（ここでは"genbank"）を引数に取り、ファイル内の各レコードを順に返します。
AccessのVBAでエクセルシートの列幅を自動調整

# 概要

これを…
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/9e8b4e62-0c07-9811-0d33-52ed4e930cb4.png)

こうしたい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/f4e867fe-4b84-3cfb-cd7d-1e67b87d1384.png)

一つ一つの列幅をいちいち指定したくない。
全選択 ⇒ 境界線をダブルクリック　のように自動調整したい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/a7f83670-d4cc-b500-521e-cf1b010a4268.png)

# やり方

参照設定に『Microsoft Excel 16.0 Object Library』を追加。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/706116/5b3bc087-bdfe-b8a6-2c67-c0a4889ea2d0.png)


```vb:サンプル
Dim excel_ As New Excel.Application
Dim excel_sheet_ As Excel.Worksheet

'バックグラウンドで起動。
excel_.Visible = False
excel_.UserControl = False

'Accessファイルと同じフォルダーにある『tes.xlsx』が対象。
excel_.Workbooks.Open FileName:=CurrentProject.Path & "\tes.xlsx"

'一番左のシートのみを選択状態に。
Set excel_sheet_ = excel_.Worksheets(1)
excel_sheet_.Select Replace:=True

'列幅自動調整。
excel_sheet_.Cells.Columns.AutoFit

'変更保存してエクセルファイル閉じる。
excel_.Workbooks(1).Close SaveChanges:=True
excel_.Quit
```

# バージョン

Windows 10 Pro 22H2 19045.2965
Microsoft Access for Microsoft 365 MSO (バージョン 2304 ビルド 16.0.16327.20200) 32 ビット
Microsoft Excel for Microsoft 365 MSO (バージョン 2304 ビルド 16.0.16327.20200) 32 ビット
Atcoder典型90問 007 - CP Classes

# Atcoder典型90問 007 - CP Classes（★3）
▶︎https://atcoder.jp/contests/typical90/tasks/typical90_g

## 問題
ABC 競技プログラミング塾には N 個のクラスがあり、
番号 i (1≤i≤N) のクラスはレーティング Aiの生徒を対象としています。

今、Q 人の生徒がこの塾に入塾しようとしています。 番号 j (1≤j≤Q) の生徒のレーティングは Bjです。 各生徒は自分に合わないレベルのクラスに行くと不満になります。 各生徒について、その不満度は次のように定義されます。

対象レーティング a と自分のレーティング b の差の絶対値、すなわち 
∣a−b∣
j=1,2,3,…,Q それぞれについて、番号 j の生徒の不満度として考えられる最小値を求めてください。 ただし、1 人も入らないクラス、複数人から成るクラスがあっても良いものとします。

## 制約
```math
1≤N≤300000 \\
1≤Q≤300000 \\
0≤A_i≤10^9 \\
0≤B_j≤10^9\\
 
入力はすべて整数
```

## 試したこと
* 見るからに二分探索。O(QlogN)なのでPypyならギリ通るかなという感じ。→Pythonでも通った、えらい。
* 「最も近い」というのが上側か下側かわからないので、二分探索で区間の両端を絞ってから近さを判定しようかなという感じ
* とけた

## 適切な方針 & 二分探索の説明
* 上でOKそうなので計算にかかった時間のみ記載しておく。いずれもAC
* Pypy3 : 1201 ms	
* Python 3.8.2 : 2259 ms]
* 二分探索 : 
    * ソートされた配列に対して、目標値を含むような区間を特定する操作。
    * left以上right以下が探索区間で、この区間を目標値を含むように狭めていく=leftとrightを近づける方向に更新していく。
    * 辞書を引くイメージ。たとえば「ねこ」を引きたい時に、leftを「あ」、rightを「ンジャメナ」にすると、ねこは必ずleft以上right以下の区間に含まれている。このときに配列の中央値midを調べて、midが「はまち」だったら、ねこはmidからみてleft側にあるはずなので、midを新しいrightに設定すれば、目標値を含むようなより狭い区間が得られる。
    * これを繰り返すと、結果として半分ずつに区間を分割していき、目標値が存在するエリアを絞り込むことができる。
    * 例) left  ~~  (ねこ)  ~~ mid ~~ right　という位置関係になった場合は
      left  ~~  (ねこ)  ~~ mid = 新しいright ~~ 古いright 
      とすると区間幅を1/2倍にできる。
    * これを繰り返すといずれ区間幅が1となり、「ねこ」の位置が特定される。
    * 今回の問題では元の配列に目標値が存在していないので、幅2まで絞り込んでから近い方をreturn

## 解説付きコード
```py
def minByBinarySearch(B, Alist, N):
  #二分探索
  left = 0
  right = N-1
  while right - left > 1:
    mid = (right + left) // 2
    if Alist[mid] > B:
      right = mid
    else:
      left = mid
  l_abs = abs(Alist[left] - B)
  r_abs = abs(Alist[right] - B)
  #近い方を判定
  if l_abs > r_abs:
    return r_abs
  else:
    return l_abs
 
def main():
  N = int(input())
  Alist = list(map(int, input().split()))

　　　　#二分探索を使いたいので配列をソート
  A_sort = sorted(Alist)
  Q = int(input())
 
  for i in range(Q):
    B = int(input())
    print(minByBinarySearch(B, A_sort, N))
 
main()
```
Git タグ

# タグとは
リリースポイント（システムが完成して公開したり、お客様に納品したりするポイント）など、キリがいいコミットに名前を付けておける機能。

# タグ付けしてみよう
注釈なしのタグと注釈ありのタグがある。注釈とはコミットメッセージのようなもので、文字通りタグをつけたコミットの詳細である。
```terminal
# 注釈なし
$ git tag <タグ名>

# 注釈あり
$ git tag -a <タグ名> -m <注釈>
```
タグの一覧、詳細を確認するコマンドは以下。
```terminal
# 一覧を表示する
$ git tag

# 詳細を表示する
$ git show <タグ名>
```
\
では実際にやってみよう。適当なディレクトリでファイルを作ってコミットしておこう。コミットが完了したら、以下を入力していこう。
```terminal
# 注釈ありタグをつける
$ git tag -a 'ver1.0.0' -m 'First version'
# 一覧を確認する
$ git tag
ver1.0.0
# タグの詳細を確認する
$ git show ver1.0.0
tag ver1.0.0
Tagger: Username <github@example.com>
Date:   Thu May 18 09:44:35 2023 +0900

First version

commit ...
```

# タグをリモートリポジトリに送信する
通常のプッシュではタグの情報は送信されない。タグ情報を送信するには、つけたいタグを指定して別途送信する必要がある。

```terminal
$ git push <リモート名> <タグ名>

# すべてのタグを送信する
$ git push <リモート名> --tags
```
\
送信したタグの情報は、GitHubから確認することができる。![スクリーンショット 2023-05-18 100734.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691652/32ea00e6-a639-2266-ff4b-f39c278e1057.jpeg)
WebArena Indigo の初回SSH接続をPuTTYで行う

WebArenaIndigoでインスタンスを作成してPuTTYでSSH接続する時の手順
----

・PrivateKeyを保存する
　インスタンス作成時に前もってSSH鍵を作成する時に、PrivateKeyのダウンロードが自動ではじまるので、これがPrivateKeyになります。これはPrivateKeyだとって判る名前で保存しておくといいでしょう。
　この作成したSSH鍵のうち、インスタンス管理→SSH鍵で見えるものはPublicKeyで、インスタンス起動時に
　　**/home/ubuntu/.ssh/authorized_keys**
　　に保存されます。

・PuTTYGenで自動ダウンロードしたPrivateKeyを.ppkに変換します
・↑を指定して接続します
　が、**わすれずに接続先を**
　　**ubuntu@XXX.XXX.XXX.XXX** (ServerIP)
　　にしましょう。

　私はこれでハマりました。

　一度接続すれば次からubuntu@は不要です。
リモートワークのメリットとデメリット

世間は、まだまだリモートワークが続いています。

ただ、何年も続けているとリモートワークのメリットよりもデメリットのほうが大きいと感じるようになってきました。
一番は後輩を育てるのが大変なことです。

リモートワークで一番大きなデメリットは、コミュニケーションの課題です。
同じ職場だったら、席が隣だったら、気軽に話せる人もリモートになると、ちょっとハードルが上がります。

また、顔が見えないので、温度感も分かりません。
「わかりました」の一言には、いくつかの種類があると言いますからね。
”理解している” or ”理解していない”
リアルに顔を合わせていたら一発で分かりますが、zoom越しだと微妙になります。

というわけで今回は、リモートワークのメリットとデメリットについて書いてみました。

## リモートワークのメリット

### 場所関係なく働ける
家だけでなく、コワーキングスペースなど、様々な場所で働けます。
通勤もないので、その分の時間を他のことに当てることができます。
**”自分の好きな環境”で働きたい人だと、重要視したいポイント。**

### コスト削減につながる
オフィスを使わない、通勤しない。
この2つからコスト削減になります。
ただ、最近では在宅勤務向けの手当を出す企業もあるので、必ずコスト削減というわけではないです。

### 良い人材を集められる
場所関係なく採用できるので、効果的なチームビルディングができます。
なんなら海外に住んでいる人も選択肢に入りますからね。

## リモートワークのデメリット

### コミュニケーションの課題
冒頭でも書いたように、コミュニケーションのハードルがあります。
後輩の育成、業務的な質問などなど、色々な場面で障害にぶつかります。（簡単な設定で30分かかるとか起こりますね...）
チームの中での意思疎通や情報共有は、円滑なほうが仕事も捗ります。

### モチベーション・集中力の低下
家での作業は、どうしても集中力が低下します。
気持ちの切り替えの難しさがありますね。。

出社すると電車に乗ったり、歩いたり、スーツを着たりするので、仕事のスイッチが入りやすいです。
しかし、在宅でやっていると始業開始5分前に起きたりと、メリハリなく仕事を開始する時もあるでしょう。
**そういう状況や環境の中でモチベーションや集中力を高くキープするのは、なかなかにタフです。**
新人や業務経験の浅い人には、悪い影響として出てしまう気がしています。

### さいごに
リモートワークは、良い面もあれば悪い面もあります。
一年後、仕事ができる人になるか、仕事に追いつけない人になるか。
自分を律するスキルが求められますね。