OmniAICreator/Qiita-1.07M huggingface dataset:
【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 修了日記

# はじめに
以下のudemy講座を本日修了したので、そのメモを投稿しようと思います。

https://www.udemy.com/course/modern_javascipt_react_beginner/

# 受講した感想
1か月ほど前に触れて挫折していたのですが、もう一度いちからやり直すにしても一日ではボリューミーな内容でした。
この講座では、素のJavaScriptでもReactでもTODOアプリを開発することで、Reactがいかに使いやすかという恩恵を感じられるような体験が用意されています。
おそらく初めて取り組んだ方にとっては、どっちも難しい！と思うのが当たり前のことです。僕もそうでした笑


### 特に難しかったところ
- hooks ( useState, useEffectなど )を使った状態管理
- コンポーネントに分割する

状態管理とひとくくりにいっても、さまざまな状態があるのでそこが混乱する要因だったのかなと思います。
*true* と *false* といったbooleanの状態、TODOの内容を管理する配列の状態など。

しかし、大事なのは結局 ***変更されるのがどこか( = 状態 )*** ということだと感じました。

Reactによるアプリケーションのパフォーマンス向上・開発体験の向上は、
>必要なところだけを変更する  

ところに鍵があるのだと思います。差分とか仮想DOMとかの難しい言葉は置いておいて、とりあえず変更する必要のあるところだけ変更すればいいよね、という考え方です。
その考え方に乗っ取って開発を進めていけばおのずと状態についても理解できてくるのではないかなと思います。
X(旧Twitter)で考えてみると、わざわざタブバーとか検索窓とかは読み込みなおす(再レンダリングし直す)必要はなさそうですよね。ユーザーのpost(tweet)の部分のみを変更していけば可能そうです。

mapでpost(tweet)を管理した配列をぶん回せば自分もあのTwitterが作れるかも…!!!
という淡い希望が湧いてきました笑


### ほかに重要だと思ったところ
***再レンダリングの条件***
- state( 状態 )の変更
- propsの変更
- 親コンポーネントの再レンダリン

レンダリングの考えは重要になってくると聞いたこともあるので重要事項としてピックアップしておきます。


# この後何しよう
まずは僕がコーチングを受けているJISOUさんからの課題をひとつ行う予定です。そのあとはじゃけぇさんのUdemyをもう一つ受講します！

みなさんもよい開発ライフを~~~
【.gitignore】.gitignoreを後から設定し、gitの管理対象外にする方法

.gitignoreを作らずに開発を進めていて、後からgit管理をしたくないファイルやディレクトリをgitの管理対象外に売る方法を解説します。

ちなみに、.gitignoreとはgitの管理対象外にするファイルやディレクトリを指定するためのファイル

## .gitignoreを後から設定し、gitの管理対象外にする方法
### １.gitignoreファイルの作成
まずは.gitignoreという名前のファイルを作成します。
```
$ touch .gitignore
```
プロジェクトのルートディレクトリに配置することが多いですが、必ずしもルートディレクトリにある必要はないです。
また、１プロジェクト内に複数の.gitignoreがあっても良いです。

### ２gitの管理対象外にしたいファイル、ディレクトリを指定
```.gitignore
# ディレクトリ配下全てをgitの管理対象外にしたい場合
node_modules/

# 特定のファイルだけをgitの管理対象外にしたい場合
test.ts

```
.gitignoreの記入ができたら、コミットしておきます。

### ３該当のファイル、ディレクトリをgitの管理対象から外す
.gitignoreを作成しただけでは、gitの管理対象外にしたいファイルやディレクトリはまだ、gitの管理対象のままです。
そのため、gitの管理対象から外してあげる必要があります。

```
$ git rm --cache -r 管理対象外にしたいディレクトリ
```

```
$ git rm --cache 管理対象外にしたファイル
```
これでgitの管理対象外にすることができました。
--cacheオプションをつけているので、実際のファイルやディレクトリが削除されるわけではないです。
ファイルやディレクトリまで削除したい場合は、--cacheオプションを外してコマンドを実行してください。

最後にもう１度コミットしたら完了です。

## .gitignoreの書き方
.gitignoreの書き方をいくつか紹介しておきます

```.gitignore
# '#'が先頭についた行はコメントアウト

# distディレクトリ配下全てをgitの管理対象外に
dist/

# .ts拡張子が付くダイルは全てgitの管理対象外に
*.ts
```
【Rails】インスタンスメソッドの定義

# インスタンスメソッドの定義
Railsにおけるインスタンスメソッドの定義は、Active Recordモデルやコントローラーなどのクラス内で行われます。これらのクラスはRubyのクラスであり、インスタンスメソッドを定義することができます。

例えば、Active Recordモデル内でインスタンスメソッドを定義する方法を示します：
```rb
class User < ApplicationRecord
  def full_name
    "#{first_name} #{last_name}"
  end
end
```
この例では、`User`モデル内で`full_name`というインスタンスメソッドが定義されています。このメソッドは、`first_name`と`last_name`属性を組み合わせてユーザーのフルネームを返します。

コントローラー内でのインスタンスメソッドの定義も同様です：
```rb
class UsersController < ApplicationController
  def show
    @user = User.find(params[:id])
  end

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.update(user_params)
      redirect_to @user
    else
      render 'edit'
    end
  end
end
```
この例では、`UsersController`内で`show`、`edit`、`update`というインスタンスメソッドが定義されています。これらのメソッドは、それぞれユーザーの表示、編集、更新を担当しています。

インスタンスメソッドは、クラスのインスタンス（オブジェクト）に対して呼び出されるため、特定のオブジェクトに関連するロジックや処理を定義するのに役立ちます。
【Rails】flash.nowとは

# flash.nowとは
`flash.now`は、Railsのコントローラーでフラッシュメッセージを表示する際に使用されるオブジェクトです。通常の`flash`とは異なり、`flash.now`で設定されたメッセージは次のリクエストでは保持されません。

通常の`flash`メッセージは、リクエストの終了時にセッションに保存され、次のリクエストで表示されます。しかし、`flash.now`メッセージは、現在のリクエストにのみ適用されます。つまり、レンダリングするビューに対して直接メッセージを表示したい場合に使用されます。

# 使用方法
例えば、次のように使用します：
```rb
# コントローラー内のアクション
def create
  @user = User.new(user_params)
  if @user.save
    flash[:success] = "User created successfully!"  # このメッセージは次のリクエストで表示される
    redirect_to @user
  else
    flash.now[:error] = "Error creating user."  # このメッセージは現在のリクエストで表示される
    render 'new'
  end
end
```
この例では、ユーザーが作成された場合は`flash[:success]`メッセージが次のリクエストで表示され、作成に失敗した場合は`flash.now[:error]`メッセージが現在のリクエストで表示されます。
逆関数法の意味とすっきりした証明

# 解説　逆関数法
逆関数法とは、一様乱数を変換し、生成したい分布に従うサンプルへ変える手法のこと。

具体的には、目的の分布の累積分布関数$F$の逆関数$F^{-1}$に、$[0,1]$上の一様乱数$u$を入力すると、目的の分布に従うサンプルが得られる。

### 逆関数法を使う動機
何かの分布に従うデータを作り出したいとき、どのようにすれば良いだろうか。
一様分布に従う乱数であれば、様々な生成器が存在する。（有名な手法に、線形合同法やメルセンヌ・ツイスタがある。）これらの生成器は、ランダム性を向上させるために様々な研究がされてきた。
下の図は、$[0,1]$上の一様乱数を10000個生成したもののヒストグラム。

![一様乱数.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565928/2d4c4042-3603-90b0-c96d-d3a215b00ae5.png)

<br>

指数分布に従うデータを作り出したい場合はどうだろう。直接、指数分布を生成することは容易ではない。そこで、性能の良い一様乱数生成器の出力を変換して、指数分布に従うようにすることを試みる。

言い換えると、$[0,1]$上の一様変数$U$と、指数関数に従う確率変数$X$の対応関係を見つけることを目的とする。

<br>

累積分布関数が、値域が$[0,1]$あったことを思い出して欲しい。累積分布関数が、指数分布から$[0,1]$への対応を表すので、逆の操作を行えば$[0,1]$上の一様分布から指数分布を作り出せそうだ。この発想が実際に正しいことは下の定理で確認する。

なお、この方法を使えば、指数分布だけでなく、様々な分布に従うサンプルを作り出すことができる。




# 定理
$U$を$[0,1]$上の一様分布に従う確率変数とする。目的の分布の累積分布関数$F$が狭義単調増加で連続なら、$F^{-1}(U)$は目的の分布に従う。ただし、$F^{-1}$は$F$の逆関数。


# 証明
任意の実数$x$に対して以下の等式が成り立つ。

```math
\begin{align}
F(x)
&= P(U \leq F(x)) \\
&= P(F^{-1}(U) \leq F^{-1}(F(x)))  \\
&= P(F^{-1}(U) \leq x)
\end{align}
```

式の初めと終わり$F(x) = P(F^{-1}(U) \leq x)$を見ると、累積分布関数の定義より、確率変数$F^{-1}(U)$は、累積分布関数$F$に従っている。



### 証明の補足説明
* $X=F^{-1}(U)$としてやれば、$X$が求めたい分布に従う確率変数となる。

* $U$は確率分布なので、$F^{-1}(U)$も確率変数となる。

* 1行目：$F(x) = P(U \leq F(x))$が成り立つのは、一様分布の性質$x=P(U \leq x)$による。

* 狭義単調増加関数なので、逆関数は必ず存在する。


# Pythonによる実装
指数分布$Exp(\lambda)$を生成する。指数分布の密度関数は以下の通りであり、逆関数が容易に求められる。
```math
\begin{align}
F(x) &= 1 - e^{-\lambda x} \\
F^{-1}(u) &= -\frac{1}{\lambda} \log(1-u)
\end{align}
```

```python:指数分布の逆関数法による生成
import numpy as np
import matplotlib.pyplot as plt

# 指数関数の母数lambを0.5とする.
lamb = 0.5

def F_inverse(u):
    return -np.log(1-u) / lamb

rng = np.random.default_rng(seed=42)
u = rng.random(10000)  # [0,1]一様分布に従う10000個の変数.

# 逆関数法により、指数分布に従う乱数xにする.
x = F_inverse(u)

# visualize
plt.hist(x, bins=30)
plt.show()
```

![Exp_inversion_method.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3565928/ba034f54-6be5-40b8-3243-71a6f4fdec60.png)

概ね指数分布に似たグラフが出力された。

<br>

逆関数法で様々な分布が再現できるが、たとえば正規分布のように累積分布関数の逆関数が簡単に表せない分布では、この方法を使うことはできない。
【Rails】form_tagとは

# form_tagとは
`form_tag`は、Railsでフォームを作成するためのヘルパーメソッドの1つです。このヘルパーメソッドを使用すると、HTMLの`<form>`タグを簡単に生成できます。

form_tagを使用すると、次のようなことができます：

1\. フォームのアクションやメソッドを指定する。
2\. フォームに含まれる入力フィールドやボタンなどの要素を含める。

以下は、form_tagの基本的な使用例です：
```erb
<%= form_tag('/search', method: 'get') do %>
  <%= text_field_tag(:query) %>
  <%= submit_tag('Search') %>
<% end %>
```
この例では、`form_tag`は`/search`に対するGETリクエストを行うフォームを生成します。フォームには1つのテキストフィールド（クエリ）と1つの送信ボタンが含まれています。

`form_tag`を使用すると、Railsで簡単にフォームを作成し、サーバーにデータを送信することができます。
【Rails】Assets: precompileとは

# Assets: precompileとは
`assets:precompile`は、Railsアプリケーションのアセット（JavaScript、CSS、画像など）を事前にコンパイルするためのコマンドです。これにより、本番環境でのパフォーマンスを向上させるために、アセットを最適化してバンドルすることができます。

具体的には、`assets:precompile`コマンドは、アプリケーションのアセットをコンパイルし、`public/assets`ディレクトリにプリコンパイルされたファイルを生成します。これにより、アプリケーションが本番環境で実行される際に、アセットの読み込みが高速化されます。

`assets:precompile`コマンドは、アプリケーションを本番環境でデプロイする前に実行する必要があります。通常は、次のようにして実行されます：
```
$ rails assets:precompile
```
このコマンドを実行すると、アプリケーションのアセットが事前にコンパイルされ、本番環境での高速な読み込みが可能になります。
How to Extract Data from Zomato API?

![How-to-Extract-Data-from-Zomato-API (1).jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3480765/e942dc33-9f4c-0686-18a7-cc94a3647257.jpeg)


How-to-Extract-Data-from-Zomato-API
Introduction
In the world of culinary delights, Zomato stands tall as one of the most popular platforms, offering a treasure trove of information about restaurants across various cities. With its rich and extensive API, we can extract valuable data on citywide restaurants listed on Zomato. In this blog, we will explore the process of accessing the Zomato API, extracting restaurant data for multiple cities, and creating a comprehensive CSV file that organizes this data efficiently.

Prerequisites
Before diving into the data extraction process, make sure you have the following:

A valid Zomato API key: To access Zomato's API, you need an API key, which you can obtain by signing up on their developer platform.

Python Environment: Ensure you have Python installed on your system and the necessary libraries, such as requests and pandas.

Step 1: Accessing the Zomato API
To get started, import the required libraries in your Python script:

Accessing-the-Zomato-API
Next, set up your Zomato API key:

api_key = "YOUR_ZOMATO_API_KEY"

Step 2: Extracting Citywise Restaurant Data
Now, let's create a function to fetch the restaurant data for a specific city:

Extracting-Citywise-Restaurant-Data
The get_restaurants() function inputs the city's name and returns a list of restaurants in JSON format.

Step 3: Looping Through Multiple Cities
To create a comprehensive dataset, we can loop through a list of cities and extract restaurant data for each city:

Looping-Through-Multiple-Cities
In this function, the city is a list of city names you want to extract data. The function returns a list of restaurant details for all the cities combined.

Step 4: Saving the Data to a CSV File
Finally, we can use pandas to convert the extracted data into a CSV file:

Saving-the-Data-to-a-CSV-File
The save_to_csv() function takes the restaurant data and the desired file name as input and saves the data to a CSV file.

Step 5: Putting It All Together
Now that we have all the necessary functions let's run the entire process:

Putting-It-All-Together
In this example, we have chosen five cities for illustration. You can customize the cities_list to include any cities of your choice.

Conclusion
Congratulations! You have successfully extracted restaurant data from the Zomato API for multiple cities and created a comprehensive CSV file. With this CSV dataset, you can perform further analyses, visualize trends, or even build exciting applications based on citywide restaurant information.

Exploring the vast world of gastronomy through the Zomato API opens up endless possibilities for restaurant enthusiasts, data analysts, and developers alike. Enjoy discovering new culinary wonders and happy data exploration!

For more details, contact Actowiz Solutions now! You can also reach us for all your mobile app scraping, instant data scraper and web scraping service requirements.

sources >> https://www.actowizsolutions.com/extract-data-from-zomato-api.php
【Rails】コンソールでレコード追加する方法

# レコードの追加方法
Railsのコンソールでレコードを追加するには、Railsのコンソール（rails console）を起動し、Active Recordモデルを使用して新しいレコードを作成します。以下は一般的な手順です：

### 手順
1\. ターミナルでRailsのプロジェクトディレクトリに移動します。
2\. rails consoleと入力してRailsのコンソールを起動します。
3\. レコードを追加したいモデルを選択します。例えば、Userモデルの場合は以下のようにします：
```rb
user = User.new
```

1\. レコードの属性を設定します。例えば、`name`や`email`などの属性がある場合は以下のようにします：
```rb
user.name = "John Doe"
user.email = "john@example.com"
```

2\. `save`メソッドを呼び出して新しいレコードをデータベースに保存します。
```rb
user.save
```
これで新しいレコードがデータベースに追加されます。すでに存在する属性を一度に指定してレコードを作成することもできます：
```rb
user = User.create(name: "Jane Smith", email: "jane@example.com")
```
`create`メソッドは、新しいレコードを作成して保存するための便利な方法です。

Railsのコンソールを使用することで、データベースに手動でレコードを追加し、データの検証や関連するモデルの操作を行うことができます。
Unix系OSのドットとドットドットとチルダのメモ

# 趣旨
パスを間違えていたために延々とエラーが発生し原因究明に数時間かかってしまったので、まとめて覚えることにしました。

本記事はその備忘録です。

# . (ドット)

Unix系オペレーティングシステムでは.は現在のディレクトリを表す。
これは現在のディレクトリを指すために使用される。
ls .というコマンドは現在ディレクトリの内容をリストする。

ファイルパスでも現在のディレクトリを指定するために.を使用する。
./script.shは、現在のディレクトリにあるscript.shという名前のシェルスクリプトを実行する。

# .. (ドット ドット)

..は現在のディレクトリの親ディレクトリを表す。
cd ..というコマンドは現在ディレクトリより1つ上のディレクトリに移動する。
ファイルパスでも親ディレクトリを指定するために..を使用できる。
../folder/file.txtは現在ディレクトリより1つ上のディレクトリ内にあるfile.txtという名前のファイルを指す。

# ~ (チルダ)

ターミナルで~を使用すると現在のユーザーのホームディレクトリを表す。
~は、ユーザーのホームディレクトリへのクイックナビゲーションに便利。
ファイルパス内でのホームディレクトリの指定にも便利。
~/Documentsは、ホームディレクトリ内のDocumentsディレクトリを指す。
【Rails】単数リソースとは

# 単数リソースとは
単数リソース（singular resource）とは、RESTfulなルーティングにおいてリソースを表現する際に、特定のリソースに対してCRUD操作（作成、読み取り、更新、削除）を行うためのルーティングを定義する方法の1つです。

通常、リソースは複数形で表現されます（例：`resources :articles`）。これは、記事（`articles`）に対する複数の操作を可能にします。一方、単数リソースは特定のリソースに対して単一の操作を提供します。

例えば、`resource :profile`というルーティングは、ユーザーのプロフィール情報に対してCRUD操作を行います。この場合、次のようなルーティングが生成されます：

- GET /profile: プロフィールの表示
- GET /profile/edit: プロフィールの編集フォーム表示
- PUT /profile: プロフィールの更新
- DELETE /profile: プロフィールの削除

単数リソースは、ユーザーごとに1つのリソースを想定しており、通常はIDを使用しないため、リソースの識別子を含めません。そのため、生成されるルートは複数形ではなく単数形になります。

単数リソースは、ユーザーのプロフィールや設定などのリソースに適しています。
よく考えたらおかしいプログラミングの英単語・文法ランキング

# はじめに
プログラミング言語にはprintやwhileといった単語が出てきますが、<b>単語の意味と実行する内容は概ね一致しています。</b>

例1 : printの場合・・・文字列が<b>表示される</b>
```python
print("Hello World")
```


例2 : whileの場合・・・カッコの<b>間</b>、実行し続ける
```python
while(i<5):
 i=i+1
```

ただし、既に慣れてしまっていますが<b>「よく考えたらおかしいプログラミングの英単語・文法」</b>があります。今回はそれらを個人的にランキングにしてご紹介します。

# 第３位  『String』
Javaなどの文字列の型で用いられる文字列の型『String』
```java
String name = "ジンバ";
```
ただし本来の英単語の意味は<b>『紐(ひも)』</b>です。
例文
```
He bound the package with a string.
彼は紐で荷物をしばった。
```
たしかに大学受験で英単語を勉強した時は「紐」で覚えていましたね。

では。なぜStringが文字列型として使われたのかというと
#### 文字列を意味する 『character string』 から取った
という説が有力みたいです。
~~letterやTextとかでも良かったのでは...~~

# 第２位  『INSERT INTO』
SQLのデータ挿入文です。
```sql
INSERT INTO テーブル名 VALUES(....)
```
という形で使います。
ただ
#### INSERT INTOは英文法として間違いです

```
insert A into B
AをBに挿入する
```
が正しい形です。
僕もSQL触り始めの頃、<b>INSERTの次にテーブル名を書いてしまうミス</b>を多発していました。


# 第１位  『double』
小数を扱うデータ型『double』ですが
#### doubleは「2倍」
という意味ですよね...
「floatの倍のビット数」を扱っているのが由来らしいですが
<ul>
<li>初見で何の2倍か判断するのは不可能
<li>数字の「2」を表すと思われそう
</ul>
といった理由で１位にさせていただきました！

# 最後に
皆さんも<b>「これもよく考えたら変じゃない？」</b>というのがあったらどんどんコメントしてください〜！

# 告知
TikTokで「プログラミングやってる人しか分からないネタ動画」をあげてます！ぜひご覧ください！↓
https://www.tiktok.com/@jimba_games

![スクリーンショット 2023-10-28 20.02.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/6ecc0e9e-8a20-0772-da6e-644a05280e8b.png)
【jQuery】繰り返し処理

# 繰り返し処理
jQueryを使用してDOM要素の集合に対して反復処理を行うためのいくつかの方法があります。

1\. **eachメソッド**
jQueryの`each`メソッドは、セット内の各要素に対して指定された関数を実行します。これは、`for`文のような反復処理を行うための主な方法です。
```js
$('li').each(function(index, element) {
    console.log(index + ': ' + $(element).text());
});
```
この例では、`<li>`要素の集合内の各要素に対して、そのインデックスとテキスト内容をコンソールに出力しています。

2\. **$.each関数**
`$.each`関数は、jQueryオブジェクトや配列などのコレクションに対して反復処理を行います。
```js
$.each([1, 2, 3], function(index, value) {
    console.log(index + ': ' + value);
});
```
この例では、配列内の各要素に対して、そのインデックスと値をコンソールに出力しています。

これらの方法は、jQueryを使用してDOM要素の反復処理を行うための一般的な手法です。
【SwiftUI】スクロール時にキーボードを下げる

# はじめに
iOS16から`scrollDismissesKeyboard`という機能が使用できます。
これを使用するとスクロールでキーボードを閉じるかどうかを指定することができます。

# 実装
### immediately
スクロールが始まったらすぐにキーボードが下がる。
```swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("", text: $text)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(20)
        }
        .scrollDismissesKeyboard(.immediately)
    }
}
```

### interactively
スクロールと連動してキーボードが下がる。
```swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("", text: $text)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(20)
        }
        .scrollDismissesKeyboard(.interactively)
    }
}
```

### never
スクロールによってキーボードが下がることはない
```swift
import SwiftUI

struct ContentView: View {
    @State var text = ""
    var body: some View {
        ScrollView {
            VStack {
                TextField("", text: $text)
                    .textFieldStyle(.roundedBorder)
            }
            .padding(20)
        }
        .scrollDismissesKeyboard(.never)
    }
}
```

# 動作動画
|immediately|interactively|never|
|-|-|-|
|![Simulator Screen Recording - iPhone 15 Pro - 2024-02-15 at 21.47.05.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/60e740a7-5673-fd14-3c19-447227866530.gif)|![Simulator Screen Recording - iPhone 15 Pro - 2024-02-15 at 21.47.45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/1efcaa57-1b19-2143-68ea-0a1277558c2d.gif)|![Simulator Screen Recording - iPhone 15 Pro - 2024-02-15 at 21.48.45.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1745371/5eaf9475-a775-b768-e5a9-3d8cba41abca.gif)|

# おわり
`ScrollDismissesKeyboardMode`には`automatic`も存在します。
しかし、`automatic`を指定して使うことはないと思うので、今回の記事には記載していません。

# 公式ドキュメント
https://developer.apple.com/documentation/swiftui/view/scrolldismisseskeyboard(_:)

https://developer.apple.com/documentation/swiftui/scrolldismisseskeyboardmode/immediately

https://developer.apple.com/documentation/swiftui/scrolldismisseskeyboardmode/interactively

https://developer.apple.com/documentation/swiftui/scrolldismisseskeyboardmode/never
Mac Python JupyterLab 仮想環境構築 & 実行


この記事では、Pythonの仮想環境を作成し、Jupyter Labで利用する方法を紹介します。Pythonの仮想環境は、プロジェクトごとに異なるバージョンのライブラリやPython自体を分離して管理するために非常に便利です。Jupyter Labは、コードの実行、データの可視化、文書の作成を一つのインターフェースで行える強力なツールです。以下の手順では、これらを組み合わせて使用する方法を説明します。

### 1. 任意のディレクトリに移動
まず、ターミナルを開き、プロジェクト用のディレクトリに移動します。これは、プロジェクトのファイルを整理しやすくするために重要です。

![スクリーンショット 2024-02-15 21.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3328398/76efb2d7-3e68-a178-3bfb-f1ad4271cc5d.png)

### 2. 仮想環境の構築
次に、以下のコマンドを実行して仮想環境を作成します。
```bash
python -m venv venv1
```
このコマンドは`venv1`という名前の仮想環境を現在のディレクトリに作成します。

### 3. 仮想環境のアクティベーション
作成した仮想環境をアクティブにするために、以下のコマンドを実行します。
```bash
source ./venv1/bin/activate
```
これで、仮想環境がアクティブになり、以降の作業はこの環境内で行われます。

### 4. Jupyterにカーネルとして登録
Jupyter Labで仮想環境を利用するために、仮想環境をカーネルとして登録します。
```bash
python -m ipykernel install --user --name venv1 --display-name "Python (venv1)"
```
このコマンドにより、`venv1`という名前でカーネルが登録され、Jupyter Labで選択可能になります。

### 5. Jupyter Labの起動
以下のコマンドを実行してJupyter Labを起動します。
```bash
jupyter lab
```
これで、ブラウザが開き、Jupyter Labのインターフェースが表示されます。

### 6. カーネルの選択
Jupyter Labで新しいノートブックを作成する際、カーネルの選択画面が表示されます。「Python (venv1)」を選択して、作成した仮想環境で作業を開始します。

![スクリーンショット 2024-02-15 21.35.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3328398/9e81e2c0-3a82-cff3-5b88-9cd90e940698.png)


### Jupyter Labのインストール
上記の手順を実行する前に、Jupyter Labがシステムにインストールされている必要があります。まだインストールしていない場合は、仮想環境をアクティベートした状態で以下のコマンドを実行してください。
```bash
pip install jupyterlab
```
これで、Jupyter Labが仮想環境にインストールされます。

### まとめ
この記事では、Pythonの仮想環境を作成し、Jupyter Labで使用するためのカーネルとして登録する方法を紹介しました。この流れをマスターすることで、プロジェクトごとに環境を分離し、依存関係を管理することが容易になります。
【備忘録】モデルにバリデーションを追加後、seed実行時のエラー

## 背景
モデルにバリデーションを追加後、`rails db:seed`を実行した時のエラーと解決策について備忘録がてら投稿します。

ユーザーからフォームの値を受け取った時、名前と画像を必須項目にしたかったため、Itemモデルに以下のバリデーションを追加しました。
``` ruby:item.rb
  validates :name, :image, presence: true
```
その後`rails db:seed`を実行すると...
```
ActiveRecord::RecordInvalid: バリデーションに失敗しました: 画像を入力してください (ActiveRecord::RecordInvalid)
```
今までは問題なく動作していたseed実行時にエラーが発生しました。

## 原因
原因はバリデーションが実行されるタイミングです。
エラーが起きた時のseedファイルのコードは以下です。（一部抜粋）
```ruby:seed.rb
item = Item.create!(name: 'name')
item.image.attach(***)
```
この場合、`item = Item.create!(name: 'name')`の時点でバリデーションが実行され、`:image`がアタッチされる前の段階のため「画像が入ってないよ」とバリデーションに引っかかってしまいます。

バリデーション実行のタイミングについてRailsガイドに記載がありました。
[https://railsguides.jp/active_record_validations.html#バリデーション実行時の動作](https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%AE%9F%E8%A1%8C%E6%99%82%E3%81%AE%E5%8B%95%E4%BD%9C)
> 以下のメソッドではバリデーションがトリガされ、オブジェクトが有効な場合にのみデータベースに保存されます。
> - create
> - create!
> - save
> - save!
> - update
> - update!

## 解決策 
上記の6コマンドは実行時点でバリデーションも実行されるとのことです。これを踏まえ、以下のように修正しました。
```ruby:seed.rb
item = Item.new(name: 'name')
item.image.attach(***)
item.save!
```
`Item.create`でインスタンス作成と保存を同時に行うのではなく、一旦`Item.new`で作成→画像をアタッチ→`item.save!`で保存するようにしました。
この変更により`save!`のタイミングでバリデーションが実行されます。`item.image.attach(***)`後に実行されるためバリデーションエラーを回避することができました。

## 学び
今回のエラーから二つ学ぶことができました。
1. `new`と`create`の違い
    - `new`: インスタンスを作成するだけ
    - `create`: インスタンス作成+保存  
2. バリデーション実行のタイミング

またネタができたら投稿します:)

## 参考
[https://railsguides.jp/active_record_validations.html#バリデーション実行時の動作](https://railsguides.jp/active_record_validations.html#%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E5%AE%9F%E8%A1%8C%E6%99%82%E3%81%AE%E5%8B%95%E4%BD%9C)
【新Ver】Blenderであらゆるノードで構成されたマテリアルをテクスチャにベイクするアドオンを作った。

# 前回までのあらすじ

https://qiita.com/gomaoaji/items/7ef62411a49ca6256fea

これを書いたときはBlenderが3.xだったが、4.xになってから動かなくなったし、昨日の更新もしたいなと思ったので振り返りながらつらつら書いていきます。

# 変更点
- Alpha値をベイクできるようにする
- BumpテクスチャはBumpテクスチャのままノーマルに変換しない。

# 4.xで何が変わったか
こんなエラーが出るようになった。
```
Error: Python: Traceback (most recent call last):
  File "C:\Users\vtvsn\AppData\Roaming\Blender Foundation\Blender\4.0\scripts\addons\bake_addon.py", line 203, in execute
    bake_material_textures(self.material_name,self.object_name,self.size)
  File "C:\Users\vtvsn\AppData\Roaming\Blender Foundation\Blender\4.0\scripts\addons\bake_addon.py", line 124, in bake_material_textures
    bake_texture_to("Emission",new_material,material_list,emission_node)
  File "C:\Users\vtvsn\AppData\Roaming\Blender Foundation\Blender\4.0\scripts\addons\bake_addon.py", line 32, in bake_texture_to
    color_value_node = connect_to_emit(name,materials,float_value,normal)
  File "C:\Users\vtvsn\AppData\Roaming\Blender Foundation\Blender\4.0\scripts\addons\bake_addon.py", line 20, in connect_to_emit
    link = principled_node.inputs[name].links
KeyError: 'bpy_prop_collection[key]: key "Emission" not found'
```
なんか`ShaderNodePrincipledBSDF`のInputソケット`Emission`の名前がかわったっぽい？
当てずっぽうで`Emission Color`にしてみたら行けました。ドキュメントとか知らない子。

# bumpに対応
オブジェクトで使われているマテリアルがすべてBumpノードのみで構成される場合に、BumpをBumpとしてベイクするように変更しました。
こんな感じでBumpだけかどうかを判別してみた。
```py
   all_bump = True
        for material in materials:
            principled_node = material.node_tree.nodes["Principled BSDF"]
            links = material.node_tree.links
            link = principled_node.inputs[name].links
            bump = link[0].from_node.bl_idname == "ShaderNodeBump"
            if(not bump):
                all_bump = False
                break
```
色々言いたいことがあるのはわかるがいいのだ。そもそも1ファイルでアドオンを完成させようとしてる時点で間違ってるからね。

# GLTFはBumpテクスチャ対応してない？！
なんと、ここまで実装してから気づいたんだが、GLTFファイルはBumpテクスチャ非対応である。
Babylon.jsでPOMしようと思って始めた改修だったが、どうしようか。
- 末尾にBUMPとでもつけて`これはBumpテクスチャですよ`と印をつけておき、babylon.js側で移し替えることにします。
あとは、Bumpなら`ShaderNodeBump`、NormalMapなら`ShaderNodeNormalMap`をnewしてlinkするだけである。
```py
    if(bump):
        bump_node = new_material.node_tree.nodes.new("ShaderNodeBump")
        links.new(normal_node.outputs['Color'], bump_node.inputs['Height'])
        links.new(bump_node.outputs["Normal"], principled_node.inputs['Normal'])
        normal_texture.name += "BUMP"
    else:
        normal_map = new_material.node_tree.nodes.new('ShaderNodeNormalMap')
        links.new(normal_node.outputs['Color'], normal_map.inputs['Color'])
        links.new(normal_map.outputs['Normal'], principled_node.inputs['Normal'])
```
# 完成
なんやかんやあってバージョン4.0になってしまった。Blenderの対応バージョンも4.0.1だし、ちょうどいいといえばそう。

https://gist.github.com/ajiken4610/a3e6c97ceccf6e74ea6baefba55ac27f
AWS勉強会_内容まとめ事項

check1

クラウドを使う理由

・必要な時に必要なだけリソースを変動できる（スケーラビリティ）
・迅速にリソースを変更できる（アジリティ）
・規模の経済でコストダウンが望める
・データセンタの運用保守、計画、投資などが不要になる
・スモールスタートが可能



AWSを使う理由

シェアが世界１位である
→規模の経済が発生しやすい
　技術革新やコストダウンのメリットが大きくなる
　またエンジニアが比較的確保しやすくなる、事例が豊富

オンプレにしなければならない理由
しないといけないとしたほうが合理的

セキュリティ面
顧客情報、重要な情報、システムを外部の企業に委託できるのか
→現在の基準では厳しい、また情報漏洩、システムの停止が起きた時の説明責任が曖昧になってしまうことが多い

したほうが合理的

そもそも大量にデータを使う、保持するなどの企業＋エンジニアがいるならば
オンプレorプライベートクラウドの法がコストメリットがある可能性あり

楽天がオンプレ回帰
集約的に運営するプライベートクラウド（One Cloud）によりコスト効率を高めるほか、IT基盤を自らのコントロール下で運用することにより、安定稼働やセキュリティー対策に関する説明責任と透明性を高められる

AWSももとはAmazonのために作られたため、、


check2
AWSの公式サイトから→ドキュメント→知りたいサービス→ユーザーガイド
へ遷移し知りたい情報を調べる


check3

rootアカウントにMFA登録　２段階認証
IAMパスワードポリシー強化
IAMグループとユーザの作成
cloudtrailの有効化、ログの長期保管
cost explorerの有効化
Security Hubの有効化

＋課金しながらやりたいところ
AWS Budgets　予算アラートの設定
AWS configの有効化（課金必要）
guraddutyの有効化（課金必要）


最新の情報
公式サイトを確認
さらに詳しく見る→最新情報を受け取る→AWSの最新情報

2年で発表されたサービス
・AI　Amazon Q　2023年
→対話型のビジネスAI、業務での利用に特化し、お客様のビジネスに合わせてカスタマイズできる新しいタイプの生成系 AI アシスタント

・Amazon Security Lake
→セキュリティ専門のデータレイクでクラウド、オンプレのセキュリティデータを一元化できるもので迅速なデータへの対応を可能にするもの


参考文献
https://aws.amazon.com/jp/about-aws/whats-new/2022/12/aws-announces-amazon-security-lake/
https://aws.amazon.com/jp/about-aws/whats-new/2023/12/aws-announces-amazon-q-to-reimagine-the-future-of-work/
https://aws.amazon.com/jp/new/?nc2=h_ql_exm_wn&whats-new-content-all.sort-by=item.additionalFields.postDateTime&whats-new-content-all.sort-order=desc&awsf.whats-new-categories=*all
https://dev.classmethod.jp/articles/aws-baseline-setting-202206/
https://aws.amazon.com/jp/cloud/
https://aws.amazon.com/jp/aws-ten-reasons/
VS Codeで特定の動作のショートカットを確認したり変更したりする

VS Codeでは動作に対してコマンドがあり、そのコマンドに対してショートカットを設定することができます。

エクステンションなどを使うと一括でショートカットが設定されますが、そのショートカットを確認したり変更したり、関連するショートカットを調べることができます。

例えば「指定範囲を行コメント化する」はコマンドパレットで「Toggle Line Comment」として定義されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/8905fa19-0938-3f82-9b13-5ed3cd117594.png)

`Command + Shift + P` でコマンドパレットを開き、「Toggle Line Comment」から実行することができます。

このショートカット設定は `⌘K ⌘S`、もしくは左下の歯車マークの「Keyboard Shortcuts」から確認することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/b8bbd2f8-f7b7-0752-d914-3c7ef53582c7.png)


絞り込むと今設定されているショートカットや、どのエクステンションで設定されているかを確認、変更することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/47327/96c519e3-c834-8145-555f-b7d8b31a13ab.png)
Defaultブランチに存在しないGitHub Actionsのワークフローをworkflow_dispatchで実行する方法

workflow_dispatchを使用したワークフロー作成した際、defaultブランチにマージする前に動作確認したいケースがあると思います。
しかし、ワークフローは一度実行しないと以下に一覧としてワークフローが表示されません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896507/79143bd2-75d1-fee6-945f-6e9df78702fc.png)


また、一度実行したとしても、defaultブランチにそのワークフローが存在しない場合、
以下の画面からworkflow_dispatchによるワークフロー実行ができません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896507/df4b2295-fd45-ba06-fad2-d2d3f1eaeea7.png)



## 解決策
以下の手順でその問題を解決できます。

- 適当に処理が終了するワークフローをon pushで作成
- ワークフローを修正し、実行したい処理を記載する
(on pushは不要であれば削除してok)
- APIでワークフローのidを取得
- 取得したIDを指定し、APIを実行しワークフロー実行

## 詳細
- 適当に処理が終了するワークフローをon pushで作成
Workflow IDを取得するために行います。
一度ワークフローを実行しないとIDを取得できないので実行します。
(Branch名: workflow-test)

``` yaml
name: Test workflow_dispatch

on:
  push:
  workflow_dispatch:

jobs:
  Job1:
    runs-on: ubuntu-latest
    steps:
    - name: Step1
      run: |
        echo Hello
```


- ワークフローを修正し、実行したい処理を記載する
今回は適当に修正します。
``` yaml
name: Test workflow_dispatch

on:
  workflow_dispatch:
    inputs:
      input1:
        type: string
        required: true
        default: 'Value1'
      input2:
        type: string
        required: true
        default: 'Value2'

jobs:
  Job1:
    runs-on: ubuntu-latest
    steps:
    - name: Step1
      run: |
        echo ${{ inputs.input1 }}
        echo ${{ inputs.input2 }}
```

- APIでワークフローのidを取得

```
$ curl -H "Accept: application/vnd.github.v3+json" \
-H "Authorization: token ${YOUR_PERSONAL_ACCESS_TOKEN}" \
https://api.github.com/repos/${OWNER}/${REPO_NAME}/actions/workflows
{
  "total_count": 1,
  "workflows": [
    {
      "id": 99999999,
      :
      :
      (省略)
      :
      :
    }
  ]
}

```

- 取得したIDを指定し、APIを実行しワークフロー実行
workflow-testブランチのworkflowを実行

```
curl -X POST \
  -H "Accept: application/vnd.github.v3+json" \
  -H "Authorization: token {YOUR_PERSONAL_ACCESS_TOKEN}" \
  https://api.github.com/repos/{OWNER}/{REPO}/actions/workflows/{WORKFLOW_ID}/dispatches \
  -d '{
    "ref": "workflow-test"
}'
```

無事実行されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896507/b2bd3ab2-265c-400b-1e06-44a72c6bc98f.png)


inputを渡したいとき
```
curl -X POST \
  -H "Accept: application/vnd.github.v3+json" \
  -H "Authorization: token {YOUR_PERSONAL_ACCESS_TOKEN}" \
  https://api.github.com/repos/{OWNER}/{REPO}/actions/workflows/{WORKFLOW_ID}/dispatches \
  -d '{
    "ref": "workflow-test",
    "inputs": {"input1": "aaa", "input2": "bbb"}
}'
```

問題なく値渡せてますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/896507/b67f5166-2af3-ef0a-ac1a-a24fda4834f6.png)
PyCharm(Professional)上でWSL環境内のPoetry環境を使う

検索したら英語しか出てこなくて困ったので......
Communityでもやればできるかもですが未検証です。

## (プロジェクト内に仮想環境を作っておく)
(必要であれば)
```
poetry config virtualenvs.in-project true
```
でプロジェクト内に仮想環境を作るようにする。
```
poetry install
```
などで実際に環境を作っておくのを忘れずに。

## PyCharmで選択
Professional版にて、`Settings`→`Project`や右下のインタプリタ選択などから`Add New Interpreter`を探し、On WSLを選択。(Community版だとおそらくこれが無い)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1133356/7c0e63f2-5002-821b-043b-bb7d4c13b5ca.png)

Virtual Environmentの上の`Environment`のラジオボタンを`Existing`に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1133356/cc1db1b6-beb9-3f7e-2a8e-edc27b330df3.png)
その下の`Interpreter`右の`...`から、作ってある仮想環境の`.venv`を探し、その中の`bin`内のPythonのファイルを選択する。(プロジェクト内に仮想環境がある場合は以下の画像のように`Project Directory`に移動すると楽です)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1133356/07e179a9-fc2d-08c2-063a-136bac655402.png)

これで仮想環境内のパッケージをimportしようとしてエラーが出なければたぶんOK
Flatpickrを使ってカレンダーを作ってみよう！

## はじめに
フォーム作成時に、日付を簡単に入力させたい！

ただ日付を入力するだけだとつまらない。。。

などなど、フォームの日時入力欄を少しリッチに実装したいなんて経験はあるのではないでしょうか？

そんな時は、javascriptのライブラリ「Flatpickr」がおすすめです！
Jqueryの知識がなくても実装する事ができます！

まずは実際にFlatpickrを確認したいと思います。


日時入力欄を押下

![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FN4wR8lzImHy7Oi6U?alt=media&token=de3d6594-2e7c-45e9-ae26-14e09a5739fc)

カレンダー内の日付押下

![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FCuVeEu27OLYjmlWD?alt=media&token=3f9aef1d-7a4d-4bc1-853d-760446ce946f)

時間も設定する事ができます。
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FZpbALllB9UyWLw7G?alt=media&token=3fd9958b-f9e6-43f9-9158-34062bbd89a9)

簡単に日時を入力する事ができました！
ただ日付を入力するよりも分かりやすくて、本格的な感じがしませんか？？

導入は簡単ですし、設定を変更してあげるだけで色々と調整する事もできます！

早速Flatpickrを実装してみましょう！
使うファイルはJS、HTML、CSSだけでOKです。

## 準備
まずはインストールします
```
npm i -D flatpickr
```

各ファイルで読み込んであげます

javascript
```javascript
import flatpickr from 'flatpickr/dist/flatpickr.min.js';
import { Japanese } from "flatpickr/dist/l10n/ja.js" //日本語用モジュール
```

html
```html
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<!-- 日本語化する場合は下記を追記 -->
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js"></script>
```

## 実装方法
jsファイルでflatpickrの後に、IDを指定します。

javascript
```javascript
// カレンダー設定
flatpickr("#event_date", {
    locale: Japanese, //日本語化
    minDate: "today", //今日以降の日付を選択できるようにする
    maxDate: new Date().fp_incr(30), // 今日から30日まで選択できるようにする
});

// 時間設定
// 開始と終了の設定が共通なためsetting変数に格納
const setting = {
   locale: Japanese,         //日本語化
    enableTime: true,       //タイムピッカーに設定
    noCalendar: true,       //同上
    dateFormat: "H:i",      //同上
    time_24hr: true,         //24時間
    minTime: "10:00",      //下限値を10:00
    maxTime: "20:00",     //上限値を20:00
  
};

flatpickr("#start_time", setting);
flatpickr("#end_time", setting);
```

html
```html
                     <div class="mt-4">
                         <input type="text" id="event_date" value="イベント日付" />
                     </div>
   
                     <div class="mt-4">
                         <input type="text" id="start_time" value="開始時間" />
                     </div>
                     
                     <div class="mt-4">
                         <input type="text" id="end_time" value="終了時間" />
                     </div>
```

これでカレンダーと時間の表示ができました！
![image](https://firebasestorage.googleapis.com/v0/b/ciita-c6ea6.appspot.com/o/user%2Fimages%2FTrFQSFDDtCrmTjAB?alt=media&token=3ba5fe1b-d5b0-4e17-80ea-02571c446a47)

javascriptの設定を調整する事で色々なことが実装できます！
参考までにリンク貼ります。
### Flatpickr
https://flatpickr.js.org/examples/#range-calendar

## 最後に
タイムピッカー系のライブラリはflatpickr以外にも沢山あります。
もし業務で使うのであれば、Jqueryに対応してるライブラリを使ってみるの良いかもしれないです。

最後まで読んでいただきありがとうございました！
Mathクラスのメソッド　まとめ

# Mathクラス
数値を操作する。(対して、文字列はString)

## abs()
引数の絶対値を返す。
```java
package text.section_20;

public class Math_Test {

	public static void main(String[] args) {
		
		int A = -100;
		
		// 絶対値を返す abs()
		System.out.println("絶対値は" + Math.abs(A));
				
		
	}
}
```
実行結果
```Java
絶対値は100
```
absの前に`Math.`がいるんだな。Math.abs(引数)としないといけない。

## max()とmin()
max：引数で渡した値を比較して大きい方の値を返す
min：引数で渡した値を比較して小さい方の値を返す
```java
package text.section_20;

public class Math_Test {

	public static void main(String[] args) {
		
		int A = 100;
		int B = 500;
		int C = 1;
		int D = -5; 
		
		
		// 大き方の値を返す
		System.out.println("AとBの比較：" + Math.max(A,B));
		// 大き方の値を返す
		System.out.println("CとDの比較：" + Math.max(C,D));
		
		// 小さい方の値を返す
		System.out.println("CとD比較：" + Math.min(C,D));	
	}
}
```
実行結果　大きい方の値を表示してくれる。
```Java
AとBの比較：500
CとDの比較：1
CとD比較：-5
```

ちなみに**引数は2つだけ。2つの値の比較にしか使えない。**
```Java
// 一番大きい値を返す
		System.out.println("AからDの比較：" + Math.max(A,B,C,D));
```
実行結果はエラー
![スクリーンショット 2024-02-15 13.00.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/7b12ec00-c4db-c469-16a2-ddf7b8da443a.png)

似たようなメソッドでStringクラスのcompareTo()があった。こちらは、比較元の数値が比較先より小さけれは負の値、大きければ正の値を返してくれる。
2つの値のどちらが大きいか？は、` Math.max(A,B)`でいけるが、複数ある値の中から最大値を求めるためにはmaxメソッドをループで回していく。詳しくは[こちら](https://eng-entrance.com/java-math-max)

# ceil()、floor()、round()
`ceil()`：引数で渡した値を**切り上げ**た値を戻り値として返す
`floor()`：引数で渡した値を**切り下げ**た値を戻り値として返す
`round()`：引数で渡した値を**四捨五入**した値を返す
《`ceil()`の実装》
```java
package text.section_20;

public class Math_Test {

	public static void main(String[] args) {
		
		double A = 1.6;
	    double B = 1.4;
	    double C = -1.4;
		
		//ceil() 切り上げる
		System.out.println(Math.ceil(A));
		System.out.println(Math.ceil(B));
		System.out.println(Math.ceil(C));		
		
	}	
}
```
実行結果
```java
2.0
2.0
-1.0
```
## random()
* 乱数を戻り値として返す
* 「* 乱数の範囲指定」を付けて、乱数の範囲を指定できる

```java
package text.section_20;

public class Math_Test {

	public static void main(String[] args) {
		for (int i = 0; i < 7; i++) {
			//　乱数を7個出力する
			System.out.println(Math.random() * 7);
		}
	}	
}
```
実行結果
```java
1.0600177869586926
1.6762898035128473
4.527356048973696
3.229690663737976
3.010668841363924
5.9490417372423074
0.6552836585924036
```
下記のように`round()`と組み合わせると整数の乱数を生成できる。
```java
System.out.println(Math.round((Math.random() * 7)));
```
実行結果
![スクリーンショット 2024-02-15 20.54.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570384/3b88dadb-65d5-74f7-8792-61f4632bbcfa.png)
環境を変えたらエンジニアとして成長した話

## はじめに
私はアスリートからエンジニアへとキャリアチェンジをし、今年でエンジニア４年目となりました。

エンジニアとしてのキャリアを開始してから現在はReact NativeやReactをメインにフロントエンド開発に携わっています。

この記事では社会人経験0からエンジニアになり成長していく私の経験と、Connecteteでの働き方を紹介します。

## エンジニアキャリアの始まり
私は高校、大学、実業団3年目まで陸上の長距離選手として活動していました。

実業団で怪我も続き、セカンドキャリアを考えた始め、プログラミングの独学を始めました。

実業団3年目に転職を決意し、3年目の5月に転職活動を始め、6月に受託会社に内定をいただき、１月に入社しました。

入社までの半年間はReact Nativeプロジェクトで上司の方のサポートのもとアプリの開発に携わらせていただきました。

入社してからは開発に関する技術的なスキルだけでなく、コミュニケーションや仕事の進め方など学ぶことばかりで、周りと自分を比較して不安になることも多くありました。

業務外での学習やキャッチアップを継続したり、上司の方からのフィードバックもあり、徐々に開発スキルや円滑に業務を進めていくためのスキルを身につけることができました。

入社してから退職までの約２年間複数のプロジェクトを経験させてもらうことができましたが、フロントエンド開発の経験しかしたことないこともあり、自分がシステム全体を見渡せていないことや、フロントエンド以外の経験をやってみたい。と思うようになりキャリアを広げられるような企業への転職を考え始めました。


## Connecteteへの転職
転職では以下の２つの条件が実現できる企業を探しており、Connecteteではその２つの条件が実現できると思い転職を決めました。

- 現在のフロントエンドを主軸に開発ができる
- 設計やバックエンドなどにも挑戦できる

入社してからは社内研修の一環でNext.jsとNestJSでの開発を経験させていただきました。初めてのバックエンド開発でしたが、シニアエンジニアのサポートもありログイン機能の実装も無事に行うことができ、入社直後からたくさんの経験をさせていただくことができました。

現在はReact Nativeでの開発と初めての詳細設計を経験しており、日々成長を感じ、楽しく働くことができています。

## 成長できるように意識していること
私は仕事での成長のために意識していることが２つあります。

1つは`自分の担当するプロジェクトや働く環境の楽しい部分を見つけること`です。仕事をする中で辛いことや大変なこともありますが、やりがいや楽しい部分を見つけることで成長につながると思っています。

２つ目が`自ら手を挙げ、自分の領域を広げていくこと`です。私はConnecteteに入社して２ヶ月目から採用活動にも携わらせていただいています。採用活動を経験することで市場でどのような人材が求められているか？そのために自分が何をやるべきか？が少しずつ見えてきました。

## 最後に
Connecteteでは未経験の技術にもチャレンジでき、社内研修、社内副業など社員の成長できる環境があります。

楽しく働きながらキャリアアップができる環境にご興味がありましたら、ご応募お待ちしております。
AUTOSAR 記事更新　最新１００

Qiita の記事は、誤字脱字、誤植、URLリンク切れなど、なるべく頻繁に更新するようにしています。
一つの記事につき、10回程度は手入れしているつもりです。

2024年2月15日から、AUTOSARに関する更新記事について記録させてください。


|No.|Title URL|Date|Detail|
|:--|:--|:--|:--|
|1|Adaptive Platform Release Overview, AUTOSAR 782, R23-11, AP　https://qiita.com/kaizen_nagoya/items/13a104606a34fe24fcf7|20240215|https://www.autosar.org/fileadmin/standards/R23-11/AP/AUTOSAR_AP_SWS_Firewall.pdf|
|2|Specification of Raw Data Stream, AUTOSAR 1098, R23-11, AP https://qiita.com/kaizen_nagoya/items/2c9ada59e07c44d1cd94|20240218|add AUTOSAR URL|
|3|AUTOSAR Adaptive Platform R23-11一覧 https://qiita.com/kaizen_nagoya/items/1dece8799a730367b0dc|20240218|add Qiita URL|
|||||
|||||



＜この記事は個人の過去の経験に基づく個人の感想です。現在所属する組織、業務とは関係がありません。＞
This article is an individual impression based on the individual's experience. It has nothing to do with the organization or business to which I currently belong.


# 文書履歴(document history)
ver. 0.01 初稿 　20240215
### 最後までおよみいただきありがとうございました。
いいね　💚、フォローをお願いします。
#### Thank you very much for reading to the last sentence.
Please press the like icon 💚　and follow me for your happy life.
学習メモ📝テクノロジー系について

## はじめに
ITパスポートのテクノロジー系が苦手なので、理解が浅いところをアウトプットも兼ねて投稿したいと思います。

##  テクノロジー系
---

### ベンチマークテスト
・実際にコンピューターを動作させて、処理にかかった時間などの情報を取得して性能を評価するテスト。

---
### 揮発性メモリと不揮発性メモリとは

・**揮発性メモリ**とは、**電源が切れるとデータが失われるメモリ**のこと

例 ）DRAM  SRAM  
→RAMが付くメモリは揮発性メモリ


・**不揮発性メモリ**とは、**データを永続的に保存**するために使用される。

例 ROM  フラッシュメモリ

---
### 情報セキュリティポリシとは
・情報セキュリティーに関するその組織の取り組み。対策をまとめた文章。

---

### サーバーに対するDos攻撃の狙い
・サービスの妨害

---
### 攻撃者が他人のPCにランサムウェアを感染させる狙い。
・PC内のファイルを使用不要にし、解除と引き換えに金銭を得る。

---

### おまけ
ITパスポートの試験はCBT方式です！

CBTとは「Computer Based Testing」の略で、コンピュータを利用した試験方式です。受験者はコンピュータに表示された試験問題に、マウスやキーボードを使って解答します。試験結果は終了と同時に確認することができます。

試験問題は受験者ごとに異なり、その都度問題データベースから適切に組み合わされて出題されます。これは同じ会場で同じ時間に受験しても受験者ごとに試験問題が異なることを意味しています。

同じ会場で皆問題が違うので、カンニングはできないですね！

終わったら点数がすぐに分かるのも画期的です！

CBT方式はITパスポートが初めて導入した方式みたいですので、これから他の国家試験も導入されていきそうです！

### さいごに
最後まで見ていただきありがとうございました！

点数がなかなか伸びずに自信はないのですが、あと二日もありますので後悔が残らないように頑張ります！
学習メモ📝 ストラテジ系の法令系について調べてみた。

ITパスポートの学習をする中で、ストラテジ系の法令が難しいと感じましたのでメモとして残します。

# 不正競争防止法
営業秘密を守るための法律が「不正競争防止法」

ライバル会社同士による不正な競争が行われないようにするための法律。


下記内容は違反行為にあたる

- 営業秘密の不正取得
- コピープロテクトを外す装置の提供
- 他社の商品名に似たドメインの不正取得

## 実例
### 秘密情報を持ち出したことによる不正競争防止法違反
```
某○っぱ寿司の運営営業会社「○ッパ・クリエイト」の前社長が
ライバル社の営業秘密を持ち出したとされる事件。
```


# 不正アクセス禁止法
不正アクセス行為を禁止する法律

下記内容に当てはまると違反になる。

①ネットワークに接続されているコンピュータに対して

②ネットワークを通じてアクセスし

③他人のID・パスワード等を入力し

④アクセス制御機能によって制限されている特定利用をできるようにした

## 実例

### 学校のサーバーに不正アクセス
```
新潟県長岡市の中学3年生が、学校のサーバーに侵入していたことが判明。
4か月にわたり、サーバーに侵入していた。
教職員用のPCを生徒に貸し出し、生徒が解析用のソフトウェアを利用したことが
ID・パスワードの窃取につながった。
```


### 他人のスマホに不正アクセス
```
カラオケで拾ったスマホからネットゲームに不正に侵入
カラオケ店で拾ったスマホから、ネットゲームにアクセス、勝手に使ったとして、逮捕
```
ArchLinuxを快適にするmakepkg.confの話

## はじめに
ArchLinuxを使っていると公式リポジトリではない、AURパッケージのお世話になることが多いと思います。デフォルト設定はAURパッケージのインストールが非常に遅いのでこれを高速化する方法について説明します。

## AURの仕組み
AURは有志が登録したパッケージで、自前でArchLinuxの形式でパッケージを作成して、それを自前のPCにインストールするためだけに使うことができる仕組みです。多くの場合ソフトウェアをビルドしてバイナリを生成しています。(バイナリをダウンロードしてるだけのものもあります)

私がよくつかっている、AURのインストーラであるtrizenも、結局のところ上記を自動化しているだけで、仕組みは変わりません。AURのリポジトリからビルド設定ファイルをダウンロードし、ビルドし、パッケージして、インストールします。

## makepkgの問題点
このパッケージ処理に使われるのがmakepkgなのですが、これのデフォルト設定はパッケージの大量配布を前提としたものになっており、超高圧縮な代わりに処理が非常に低速なオプションが設定されており、AURの処理を著しく遅くしています。`/etc/makepkg.conf` を変更することによって自前ビルドに最適化することが可能です。

## 変更点
makepkgが使用する圧縮形式は`PKGEXT`に指定される拡張子が使用されます。デフォルトでは`.zst`になっているため、zstdで圧縮します。zstdの圧縮に使われるコマンドは`COMPRESSZST`で分かります。デフォルトでは`zstd -c -T0 --ultra -20 -`となっています。ultraは超高圧縮設定を有効にするもので、圧縮率は20が設定されています。だいぶキツい設定なので例えば次のようにします。

```
COMPRESSZST=(zstd -c -T0 -)
```

また、makeに並列数を設定できて、一部のパッケージのビルドが高速化されます

```
#MAKEFLAGS="-j2"
```

のコメントアウトを外し、jの後ろに好きな並列数を設定するといいです。

## おわり
これだけでAURのパッケージインストールがだいぶ早くなるはずです。単に早くしたいだけならこれぐらいの知識で十分だとおもいますが、もう少しmakepkgの気持ちを知りたい場合は公式をどうぞ。

https://wiki.archlinux.jp/index.php/Makepkg

みなさんもよいArchLinuxライフを!
Laravel開発をちょっと快適に！ tinkerの使い方

## はじめに
Laravelでクエリビルダを調べてる時に気になったので深掘りしてみました。

## tinkerとは
Laravelに標準で搭載されている対話型のコンソール。

LaravelでクエリビルダやEloquentの結果を確認する事ができるみたいです。

取得したデータを確認したい時に便利かなと思いました。

## とりあえず使ってみた

### 使い方
下記コマンド入力
php artisan tinker　
 ```
 kamimurayuuta@uemurayuutanoMacBook-Pro todoTask % php artisan tinker
 
Psy Shell v0.11.12 (PHP 8.1.10 — cli) by Justin Hileman
> 
 ```
 ## モデルの取得（全件）
 ```
 > App\Models\User::all()
= Illuminate\Database\Eloquent\Collection {#4466
    all: [
      App\Models\User {#4720
        id: 1,
        name: "test",
        email: "dummy@email.com",
        email_verified_at: null,
        #password: "$2y$10$0WmCBESuQUzgnRQQhisAo./Rvo/baZ4f.sO7ByObNZXp/6pITgtYG",
        #remember_token: null,
        created_at: "2023-03-09 06:22:28",
        updated_at: "2023-03-09 06:22:28",
      },
      App\Models\User {#4721
        id: 2,
 ```
 
 ## モデルの取得（ID指定）
 ```
 > App\Models\User::find(2)
= App\Models\User {#4103
    id: 2,
    name: "テストユーザー",
    email: "test@test.com",
    email_verified_at: null,
    #password: "$2y$10$6l59SE2dTBx53362n.TysuQJcoAwewdcEQkWCL6n.uabrbPyuV9MW",
    #remember_token: null,
    created_at: "2023-03-09 06:56:14",
    updated_at: "2023-03-09 06:56:14",
  }
```
サクッとテーブルの中身が見れそうです！

## Carbonで日付確認
```
> Carbon\CarbonImmutable::now()
= Carbon\CarbonImmutable @1678444016 {#4465
    date: 2023-03-10 10:26:56.803323 UTC (+00:00),
  }
```

ライブラリの中身も見れます！
初めて使うライブラリとかで役に立ちそうです。

## historyで過去のコマンド確認
```
> history
 0: App\Models\User::all();
 1: exit
 2: help
 3: history
 4: $user = User::find(1)
 5: $user->name
 6: $event
 7: $event->editEventDate
 8: Carbon::today()
 9: echo('hello');
10: $hello = 'world';
11: Carbon\Carbon::now();
12: history
13: User::where('id', 1)->get();
```
コマンドの履歴も確認する事ができます！

## 返り値の確認
```
<?php

namespace App\Utils;

class Hello
{
    public static function sayHello()
    {
        return 'hello';
    }
}
```

```
>>> App\Utils\Hello::sayHello();
=> "hello"
```

メソッドの返り値も確認できます。
返り値が確認できるのは便利だと思います。

ddでしかデバックしてなかったので、デバックの幅が広がりそうです。
画像検出アルゴリズムOpenCVで役に立つサイト

画像検出アルゴリズムOpenCVで役に立ったなと感じたサイトを勝手ながらご紹介させていただきます。
必要に応じて新しいページを見つけたら追記していきます。

https://products.sint.co.jp/aisia-ad/blog/image-recognition-ai-front-line#:~:text=%E7%94%BB%E5%83%8F%E8%AA%8D%E8%AD%98AI%E3%81%A8%E3%81%AF,%E3%81%99%E3%82%8B%E3%81%A8%E3%81%84%E3%81%86%E9%81%95%E3%81%84%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82


https://products.sint.co.jp/aisia-ad/blog/python-image-recognition



http://opencv.jp/sample/
【インターン】CA Tech Accelに参加した話【雑記】

# 自己紹介
CA Tech Accelでベストチーム賞を受賞した大学生Unityエンジニア。やったー！

https://twitter.com/KaidoAtsuya

# CA Tech Accelとは（2023 ~ 2024版）
CyberAgentさん主催のインターン。内定者の方２人と26卒の学生がチームを組んで「圧倒的な成長」を目指す3ヶ月のインターン。

## 実際の内容
実際には「圧倒的な成長」を軸にしてればOKという、良い意味で丸投げ。メンターさんとどのように進めていくか決められることができます。
私はハッカソン的に１つのゲームを作るという形でレビューなどをしてもらい成長を目指しました。

ほかにも複数のデモを作って勉強している人や、今までのブラッシュアップなどをしている人もいました。ｼﾞﾕｳ

そのほかオフィスツアー等も一度行かせてもらえます！

### 私の制作物
詳しくは触れませんが、私がTech Accelで制作したものです。

https://github.com/AtsuAtsu0120/Tech-Accel_2023-2024

# 振り返り
### 技術的な話
技術的な成長は、言ってしまえば「いつも通り + α」ぐらいのテンションでしたね。
正直もっと恩恵を受けられる人がほかにいたんじゃないかなと思うぐらい…

しかし、もちろん α の部分は大きかったし特にShader Lab / HLSLに関しては全く知らなかったので始められる良い機会でした。

### その他の面
ここが一番大きかったですね。
メンターさんが色々社員さんとお話しする機会を作ってくれて、本当に楽しく貴重な体験でした。

来年もあるか知りませんが、参加される方はメンターさんに無茶でも良いので頼んでみることをお勧めします。
全力で環境を利用する力、、、大事。

# ベストチーム賞になった件
ベストチームになったなってないは正直どうでもいいんですが、嬉しいものは嬉しいですね。
それよりも今後Accelのベストベストチーム賞という肩書ではなく、「Accelで得た体験」を糧にさらに強くなっていきます。

### 審査基準は？
審査基準は分かりませんが、思っているよりもハッカソン的な審査基準だったのかなと思いました。（かといって便利なプロダクトなどプロダクトの実社会での性能は関係ないはず。それよりも技術面かも？）
もっと「成長」などに着眼点を置いているのかなとも思いましたが、アウトプットがあるほうが、成長が見やすいということですかね。
まぁ正直ベストチーム賞になること自体は（もちろん嬉しいんですが）このインターンにおいては重要なことではないと思います。なので、ここを目指して活動するよりも精一杯活動してこれが降ってきたという形が理想かな…と。

### なんでベストチーム賞取れたの？
メンターさんは私のおかげといってくれてましたが、私はメンターさんのおかげだと思っています。
凄く濃密な議論もできましたし、ほかのチームがやってないようなイベントも凄い数企画してくれてました。

本当にメンターさんがおふたりで良かったなとそう思えるぐらい最高でした。
ありがとうございました。

今回ベストチーム賞は複数ありましたが、それでも私は私のチームが一番Accelを使い果たした最高のチームだと思います。

# 最後に
この記事を読んでいる人はたぶん私が「ここが勉強になった！」とか興味ないと思うし、深く書きすぎると大人に怒られるので、ざっと来年申し込む人に対して紹介できるような記事にしてみました。

来年もTech Accelで素晴らしい成長体験をする人たちが出るのを楽しみにしてます。
Xの`#CATechAccel`使ってる人いなさすぎるのですが、ぜひ使ってください。（公式タグがあったらそっち使って）

個人的に来年のAccelも遠目で楽しみにしてます。CirKitの後輩とかで行ってくれないかな？
何度も言いますが、来年あるかどうか私は全く知りませんよ。

## 感謝
開催において、尽力されたCyberAgentのみなさん。色々教えてくださったメンターさん。私みたいな人とたくさんお話してくれたCyberAgentの現役エンジニアのみなさん。
そして一緒に切磋琢磨したゲームチームのみんなへの感謝で締めたいと思います。

ありがとうございました。

## 追記
恐らく最初で最後であろう、クソコラ賞を頂きました。
くそおもろい。

https://twitter.com/y_takarada/status/1758112981861408817

https://twitter.com/KaidoAtsuya/status/1758114253863817636

このあと調子乗ったリプを飛ばしています。宝田さんごめんなさい。
HelloWorld本 第6章

# printf()

[glibc/stdio-common/printf.c](https://github.com/lattera/glibc/blob/master/stdio-common/printf.c)に定義される。

```
int __printf(const char *format, ...) {
    va_list arg;
    int done;
    va_start(arg, format);
    done = vfprintf(stdout, format, arg);
    va_end(arg);
    return done;
}

ldbl_strong_alias(__printf, printf);
```

エイリアスの実装は以下である。

```
#define ldbl_strong_alias(name, aliasname) strong_alias(name, aliasname)
#define strong_alias(name, aliasname) _strong_alias(name, aliasname)
#define _strong_alias(name, aliasname) extern __typeof(name) aliasname __attribute__((alias(#name)));
```

# vfprintf()

vfprintf()は_IO_putc_unlockedでバッファリングを行う。
ファイル構造体は_IO_write_base、_IO_write_ptr、_IO_write_endを持つ。

```
#define _IO_putc_unlocked(_ch, _fp) _fp->_IO_write_ptr >= _fp->_IO_write_end ? __overflow() : *_fp->_IO_write_ptr++ = _ch
```

_IO_do_write()は以下の条件で呼ばれ、最終的にwrite()を呼び出す。

- EOFに達した
- _IO_UNBUFFEREDが立っている
- _IO_LINE_BUFが立っており、改行コードが来た

_IO_LINE_BUFはsetvbuf()で_IOLBFを指定するか、出力先がTTYの場合に立つ。

# FreeBSD

カーネル、ライブラリ、コマンドをまとめて配布する。
関数末尾の関数呼び出しはジャンプに最適化されていた。

# Newlib

浮動小数点数を使用できない組み込みシステムでは、フルセットのprintf()はエラーになる。
configureのオプションでミニマムな実装を選択でき、サイズの削減とビルドの成功率に貢献する。
はじめてのJavaScript:初心者の学び場（高階関数）

今回は高階関数を学び　まとめとして残します。

# 高階関数
他の関数を引数として受け取るか、あるいは関数を戻り値として返す関数のことです。JavaScriptにおいて、高階関数は非常に重要であり、コードの再利用性や柔軟性を高めるのに役立つ

## 高階関数の特徴
:::note info

1\.関数を引数として受け取ることができる
他の関数を引数として受け取ることができます。これにより、同じ処理を複数の関数で共有することが可能になる
:::
```diff_javascript:
function doSomething(func) {
  console.log("Doing something...");
  func(); // 他の関数を呼び出す
}

function sayHello() {
  console.log("Hello!");
}

doSomething(sayHello); // sayHello関数を引数として渡す

```
doSomethingという高階関数があり、sayHelloという関数を引数として受け取り、実行します。



:::note info
2\.関数を戻り値として返すことができる
関数を戻り値として返すこともできます。これにより、動的な関数生成やカリー化 (Currying) などの機能を実装することができる
:::
```diff_javascript:
function greet(language) {
  if (language === "en") {
    return function() {
      console.log("Hello!");
    };
  } else if (language === "es") {
    return function() {
      console.log("¡Hola!");
    };
  } else {
    return function() {
      console.log("Language not supported");
    };
  }
}

const greetEnglish = greet("en");
greetEnglish(); // "Hello!"

const greetSpanish = greet("es");
greetSpanish(); // "¡Hola!"

const greetUnknown = greet("jp");
greetUnknown(); // "Language not supported"

```
greetという高階関数があり、言語を受け取り、適切な挨拶を返す関数を戻り値として返します。

理解をもう少し深めるために実用的な高階関数の例
### 配列の操作における高階関数
高階関数は、配列の操作に非常に便利で、配列内の要素を加工したり、フィルタリングしたり、合計したりすることができる。
```diff_javascript:
const numbers = [1, 2, 3, 4, 5];

// マップ関数: 配列の各要素に対して操作を行い、新しい配列を生成する
const squaredNumbers = numbers.map(function(num) {
  return num * num;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

// フィルタ関数: 条件に合致する要素のみを抽出する
const evenNumbers = numbers.filter(function(num) {
  return num % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

// リデュース関数: 配列内の要素を合計する
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 15
```
### イベントハンドリングにおける高階関数
:::note alert
イベントハンドリングにおける高階関数という用語は一般的に使われていません
:::
Reactでのイベントハンドリングでは、イベントがトリガーされたときに実行される関数を定義します。これは通常、高階関数ではなく、通常の関数ですが、JavaScriptにおいては、イベントハンドラ自体が高階関数の概念に関連するもの
```diff_javascript:
import React from 'react';

function MyComponent() {
  function handleClick() {
    console.log('Button clicked');
  }

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

export default MyComponent;

```
handleClickはイベントが発生したときに呼び出される関数です。Reactでは、この関数は「イベントハンドラ」と呼ばれます。handleClickは通常の関数であり、高階関数ではありませんが、イベントハンドラ自体がイベントを受け取り、それに応じて関数を実行する機能を持っています

### 非同期処理における高階関数
非同期処理を行う際に、高階関数はコールバックやPromiseと組み合わせて利用されることがあります。
```diff_javascript:
function fetchData(callback) {
  setTimeout(function() {
    const data = { name: 'John', age: 30 };
    callback(data);
  }, 1000);
}

function processData(data) {
  console.log('Data received:', data);
}

fetchData(processData);

```
fetchData関数が非同期でデータを取得し、取得したデータをコールバック関数に渡しています。processData関数が高階関数としてfetchDataに渡され、データが取得された後に実行されます。