OmniAICreator/Qiita-1.07M huggingface dataset:
ハンバーガーメニュー

#ネガティブmarginについて
ハンバーガーメニューを使うときに、使われると思います。
通常、marginは正の数で表されますが、実はマイナス表記も設定することができます。
これを使用することで、親要素と重なって使用することができる。
今回の使用でいうと、ブラウザの外側にCSSでセットしてそれをjQueryで設定するような感じです。(語彙力)

#トランスフォームプロパティ
要素の移動、拡大、縮小、回転に使います。
transform. transalate3d（）とすると、x軸（横）、Ｙ軸（縦）、Z軸(奥行き)の移動に使用することができます。

今回のハンバーガーメニューでは、メニュー内容をクリックしたときにメニュー内容一覧が出てくるようにします。
このとき、イベント発生時というのは、ユーザーがクリックしたときです。

```index.html
<div id="wrapper">
<nav id="nav">
```
今回のターゲットのHTMLは上記になります。
このタグに対して、jQueryを当てて行きます。

```index.js
$(document).ready(function() {
    $('#open_nav').on('click', function() {
        $('#wrapper, #nav').toggleClass('show');
    });
});
```
前回の記事で書いたようにお決まりの始まりから記述していきます。
open_navでクリックイベントで関数、
ファンクション内での処理は、上記のindex.htmlに記述された要素wrapperとnavを取得します。
toggleClassメソッドでshowがついていた場合は追加、ない場合は削除。

今回の場合は、クラスをイベント発生時に追加する形になります。

>出典
https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577
PHP条件分岐について（初学者向け）

こんにちはseki_miです。
本日は前回の続きでPHPについての記事になります。
今回は短く条件式についてご説明させて頂きたいと思います。

# 条件分岐
条件分岐は、条件に合致する場合は「Aの処理」、そうではない場合は「Bの処理」ということができます。
記述の仕方を見てみましょう。条件分岐はifを用いその後に（）で条件式を作ります。条件式の後ろに{}で中に条件が成り立った場合の処理を記述します。

```php:index.php
<?php
 $age = 22;

　if ($age >= 20) {
    echo ("adult");
  }
```

上記の条件分岐は年齢について条件式を作っています。もし、設定された年齢が20歳以上だった場合は”adult”と表示するようにしています。最初に変数で22と記述しているので今回は”adult”と表示されます。
もし20以下の数字だった場合は何も表示されません。


続いて条件が成り立つ場合と成り立たない場合の処理を記述する場合です。
この場合は”else”を用います。

```php:index.php
<?php
 $age = 18;

　if ($age >= 20) {
    echo ("adult");
  }else{
    echo ("child");
  }
```

上記の場合は変数が18となっているので”child”と表示されます。


続いて条件を追加したい場合について見てみましょう。
複数の条件を作る場合は"else if"を用います。
下記の条件式はもし年齢が20歳以上だった場合、もし年齢が0歳だった場合の条件を記述しています。

```php:index.php
<?php
 $age = 0;

　if ($age >= 20) {
    echo ("adult");
  }else if ($age == 0){
    echo ("baby");
　}else{
    echo ("child");
  }

```
上記は20歳以上であれば”adult”、0歳だったら”baby”、それ以外は”child”が表示される条件式です。
他にも下記のような条件式も作れます。


```php:index.php
<?php
 $age = 28;

　if ($age >= 20 && $age < 30) {
    echo ("20以上30未満");
  }else{
    echo ("それ以外");
　}

```

上記は年齢が20歳以上かつ30歳未満だった場合の処理です。



以上です。

最後までお読み頂きありがとうございました。

seki_mi
Zoomクライアントのダウングレード

Windows版[^1]Zoomデスクトップクライアントは、「アップデートを確認」「更新」とちょいちょいクリックするだけで簡単にバージョンが更新できて便利ですが、バージョン更新によって古いバージョンにあったものがなくなったり、動いていたものが動かなくなったり[^2]と、以前のバージョンへと一時的に[^3]戻したくなることがあります。これはそのような時のための忘備録です。

[Zoomのダウンロードセンター](https://zoom.us/download)には「ダウンロード」というボタンがあって、そのリンクは最新版のものになっています（ https://zoom.us/client/latest/ZoomInstaller.exe ）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43042/6eba99d1-ca04-5529-a7b7-73003ae99a9a.png)

このURLの「latest」の部分を、ダウングレードしたいバージョンに変えてみましょう。[Release notes for Windows](https://support.zoom.us/hc/en-us/articles/201361953)を眺めて、たとえば「March 29, 2021 version 5.6.1 (617)」に戻したいのであれば「5.6.1.617」とします（ https://zoom.us/client/5.6.1.617/ZoomInstaller.exe ）。こうしてダウンロードしたインストーラーを実行すると、上書きでZoomクライアントのバージョンがダウングレードされます。

[^1]: Mac版はよく知りません。同じようにURLを変えたインストーラーによってダウングレードできるのかもしれないし、あるいは[これ](https://qiita.com/pei_1227/items/71234fff6f1b4bb3cf0a)みたいなことが必要なのかもしれません。

[^2]: ミーティング前に「更新」を押したら[何もしてないのに壊れた](https://dic.nicovideo.jp/a/%E4%BD%95%E3%82%82%E3%81%97%E3%81%A6%E3%81%AA%E3%81%84%E3%81%AE%E3%81%AB%E5%A3%8A%E3%82%8C%E3%81%9F)というのが本日私が体験した怖い話です。（プロキシ下で接続できなくなった。2021年4月29日追記：version 5.6.4 (799)で無事に直してくれました "Resolved an issue for a subset of users regarding connection issues when using a proxy"）。


[^3]: 長期的なことを考えると、フィードバックを送るなり、ほかの解決策を探すなりしたほうがよいでしょう。
アドミニストレーター認定試験に向けた学習 ⇒ アドミニストレーター認定の準備: セキュリティとデータ管理 ⇒ セキュリティとアクセスの学習

１．Salesforce 認定アドミニストレーター試験のうち、「セキュリティとアクセス」セクションが占める割合は何パーセントですか?
２．Salesforce 認定アドミニストレーター試験の「セキュリティとアクセス」セクションで取り上げる主なトピックはどれですか?
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/b87d797b-2339-6877-f796-8aec3863788d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/de14d800-3014-f1dc-f8c6-b66783aa09a0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/d33bcef6-8097-3f23-5d5b-68b57a5fa652.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/634241/bf2d4381-78e4-d992-6b9c-447a01555e17.png)
【Dr.Sum】作成済ビューを他のDr.Sum環境にコピーしたい（デザインモード使えるよ）

#目標
ある環境で作成したDr.Sumビューを、他の環境にコピーしたい。
開発環境から本番環境、とか。

#経緯
知ってる人は知ってるテクニック。それを知らなかった頃の私、苦労をしていた時期がありました。

#手順
####(1)コピー元環境のEnterpriseManager起動
####(2)コピーするビューを右クリック→SQLの確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/91eef80d-51e1-fe58-4d25-b66d5c33c7c9.png)
####(3)表示されたSQLをコピー
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/29de689f-f8f4-ffdc-2750-c3a28612402e.png)
####(4)コピー先環境のEnterpriseManagerでSQL Execuratorを起動
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/c2dfca75-ebe3-1ccb-a956-9c7bbcc3449a.png)
####(5)SQLを貼り付けて実行
※このとき、該当するDB（スキーマ）を選択してくださいね。
画面では「共通」になってるプルダウンのとこ。違うDBに作らないように。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/d4a61218-54b7-bbe4-d2c9-e4afc6957eb5.png)
####(6)ビューは出来るけどこのままだとデザインモード表示ができぬのよ
デザインモード↓ はSQLに詳しくなくても扱いやすいよね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/790124fc-17a7-fc1a-8454-47224f68283d.png)
でもSQLでビュー作ると、テキストモード↓ になってしまうのですよ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/2d8e9f8e-74ef-9543-125e-bdf7912680df.png)
####(7)大丈夫、あとひと手間でデザインモードに出来る
コピー元環境のEnterpriseManagerを起動し、DBを右クリック→プロパティでどこにDB本体があるか分かりますのでチェック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/f4264cad-e5f7-fabc-154f-2e9be5cdaf6c.png)
その下のVIEWフォルダ（上の例だとE:\DrSum/db/共通/VIEW）に、ビューと同名のファイルがあります。
このファイルをコピーして、コピー先のVIEWフォルダに入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278265/a4c6f2e8-3c46-46eb-02eb-2e7cc916697f.png)
これで、デザインモードが使えるようになります。
<font color="Red">SQLで作成したあとすぐやるよう習慣づけましょう</font>
#つぶやき
この方法を知る前は、テスト環境でビュー作成してテスト、完了後に本番で手作りでビュー作成して、テスト環境ビューと本番環境ビューのSQLに差異が無いか確認！という恐ろしい作業をしていました。めっちゃめんどくさかった。

以上
HTTPSの仕組み

# HTTPS
Webサイトからショッピングやバンキングができるようになるに伴い、個人情報の漏洩が問題視されてきた。対策として、データを守る仕組みである「**HTTPS(HTTP over SSL/TLS)**」が開発された。
HTTP通信において、暗号化方式である**SSL(Secure Sockets Layer)**や**TLS(Transport Layer Security)**を利用することでWebサイトを安全に使うことができる。
## 安全確保の仕組み
SSL/TLSでは以下の３つの仕組みによりWebサイトの安全性を確保する。
### 盗聴防止（暗号化通信）
Webサイト閲覧には何台ものサーバーを経由するため、第三者は比較的簡単に通信内容を傍受できる。万が一傍受されても内容を解読されないようデータを暗号化して送ることにより、第三者からの盗聴を防ぐ。
### 改ざん防止
ネットショッピングにおいて商品の個数を書き換えるなどのデータ改ざん対策として、「**メッセージダイジェスト**」が利用される。メッセージダイジェストは、あるデータから一意の短いデータ（ハッシュ値）を取り出す計算のことである。これにより、データの送受信時にハッシュ値を比較して改ざんを検知できる。
### なりすまし防止
Webサーバーに「**SSLサーバー証明書**」という電子証明書を配置しておき、接続時に検証することでWebサイト運営者の身元を確認できる。
また、この証明書は発行を認められた「認証局」による運営者の認証作業を経る必要がある。信頼できない発行元の証明書が利用されている場合はWebブラウザ上に警告画面が表示される。
## HTTPSのやりとり
HTTPSでの通信を開始するには、大きく分けて以下の４つのフェーズのやりとりをする必要がある。
### 1. 暗号化方式の決定
暗号化方式は複数あるため、WebブラウザとWebサーバーがともに利用可能な暗号化方式を決める必要がある。TLSのバージョンやメッセージダイジェストの方式も同時に決定する。
### 2. 通信相手の証明
Webブラウザが通信しているWebサーバーが正しい相手なのかをSSLサーバー証明書により確認する。確認できなかった場合は、Webブラウザ上に警告が表示される。
### 3. 鍵の交換
データ転送時に利用する「鍵」を交換する。鍵はデータを転送する際の暗号化、解読時の復号化に利用される。
### 4. 暗号化方式の確認
実際に利用する暗号化方式の最終確認作業を行う。このフェーズが完了すると暗号化通信が開始される。
![HTTPS.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/999125/d3569f62-35dc-e088-ede1-d3f2500f3fc1.jpeg)

HTTPSにおけるこれら４つのフェーズのやりとりは、「**SSL/TLSハンドシェイク**」と呼ばれる。
# 参考
[イラスト図解式 この一冊で全部わかるWeb技術の基本](https://www.amazon.co.jp/gp/product/B06XNMMC9S/ref=ppx_yo_dt_b_d_asin_title_o05?ie=UTF8&psc=1)
【AWS】IAMユーザ作成手順

# はじめに
本記事ではAWSのベストプラクティス（最初のIAMユーザを作成するときにだけルートユーザを使用する）に準拠するため、IAMユーザの作成手順をまとめました。
本来であれば必要最小限の権限を付与するのがベストですが、今回はAdministratorAccessを保有した管理者ユーザの作成手順を紹介します。

# IAMユーザー作成手順
1.IAMコンソールにアクセス
![スクリーンショット (54).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/383ddc70-3363-130f-e890-0c482499c4a4.png)
<BR>

2.左ペインより「ユーザー」をクリック、「ユーザーを追加」をクリックする
![スクリーンショット (55).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/97c9fa36-c9e6-4c36-1a30-fd01b0c5d739.png)
<BR>

3.以下の通り必要項目を入力し、「次のステップ：アクセス権限」をクリックする
![スクリーンショット (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/adc0782e-a4fb-d3c8-1e2c-d04ddfcd9093.png)
![スクリーンショット (57).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/21a1b391-1e9a-2538-797b-221aba12f46c.png)

- **ユーザー名：** 任意のユーザー名を入力（ここでは「test_user」とします）。
- **AWSアクセスの種類を選択：**「AWSマネジメントコンソールへのアクセス」にチェック
- **コンソールのパスワード：**「自動生成パスワード」にチェック
    - パスワードを自分で設定したい場合はカスタムパスワードを選択します。
- **パスワードのリセットが必要：** チェックしない
    - 自動生成のパスワードはセキュリティ強度が高いので、リセットせずそのまま使用します。
<BR><BR><BR>

4.「既存のポリシーを直接アタッチ」をクリック、「AdministratorAccess」にチェックを入れ、「次のステップ：タグ」をクリックする
![スクリーンショット (58).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/ad9abbb4-a14e-3af6-b696-884dc6557049.png)
<BR>

5.何も入力せず「次のステップ：確認」をクリックする
  ※タグのユースケースは本記事では割愛します。 
![スクリーンショット (59).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/5822780c-4545-9a74-02c3-e3eebfb9377c.png)
<BR>

6.入力事項を確認し、問題なければ「ユーザーの作成」をクリックする
![スクリーンショット (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/a2ceca16-ce2d-7041-55ad-9aeac29bf895.png)
<BR>


7.「.csvのダウンロード」をクリックして認証情報（ユーザー名、コンソールのURL、パスワードなど）の記載されたcsvファイルをダウンロード後、「閉じる」をクリックする
![スクリーンショット (61)_LI.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/8c2137f4-63d7-9a1a-eb8b-7d501b0a89e0.jpeg)
<BR>

# サインイン確認
項番7でダウンロードしたcsvファイルを開き、記載されたURLにアクセス、サインインする
![スクリーンショット (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/494752/860c71b4-daad-e59d-226f-97510d5fea92.png)

- **アカウントID：** デフォルトのまま（スクリーンショットではIDを公開しないよう空欄ですが、実際は表示されます）
- **ユーザー名：** csvファイルの「User name」を入力
- **パスワード：** csvファイルの「Password」を入力

以上
Docker for Mac の不思議なパス解決の話

# forbidden path outside the build context: .. () ってなんやねん

みなさん、Dockerfile 内で、 `COPY .. <path-to-image-dir>` として、

```
Step 5/6 : COPY .. /memo_dir
COPY failed: forbidden path outside the build context: .. ()
```

と怒られた経験、ございませんか？

僕はつい先程怒られてカチきれてました。

このエラーは何を言っているのかというと、”オメーどうして、docker (docker-compose )が支配しているフォルダの外を見ようとしてンだ” ということです。

これは、例えばプロジェクト構造が、

```
project_A
  |- docker-files
  |   `- docker-compose.yml
  |- go.mod
  `- app
      `- main.go
```

みたいなときによく起こるエラーのようで、下記で紹介するような docker-compose x dockerfile の書き方をすると起こります。

```yaml
version: "3.9"
services:
  print_memo:
    build:
      context: ./../
      dockerfile: workspace/app/Dockerfile
```

```dockerfile
FROM alpine:latest
MAINTAINER MokkeMeguru <meguru.mokke@gmail.com>
LABEL version 20-10-5
WORKDIR /memo_dir
## .. を見に行っているので、linux ではエラー
COPY .. /memo_dir 
ENTRYPOINT ["/bin/cat", "memo.txt"]
```

この問題の厄介なところは、 **Docker for Mac ではエラーが起きない** という点です。

なので、Cloud Run などへデプロイする際にぶっ壊れる可能性がちょっとあるわけです。

# 検証
検証用コード https://github.com/MokkeMeguru/docker-path-test

比較するのは、 `workspace/app/dockerfile` と `workspace-for-linux/app/dockerfile` です。

- workspace/app/dockerfile

```dockerfile
FROM alpine:latest
MAINTAINER MokkeMeguru <meguru.mokke@gmail.com>
LABEL version 20-10-5
WORKDIR /memo_dir
COPY .. /memo_dir
ENTRYPOINT ["/bin/cat", "memo.txt"]
```

- workspace-for-linux/app/dockerfile

```
FROM alpine:latest
MAINTAINER MokkeMeguru <meguru.mokke@gmail.com>
LABEL version 20-10-5
WORKDIR /memo_dir
COPY . /memo_dir
ENTRYPOINT ["/bin/cat", "memo.txt"]
```

docker-compose.yml は共通して次のようなものを使います。

```yaml
version: "3.9"
services:
  print_memo:
    build:
      # context で上の階層を支配域に加えている 
      context: ./../
      dockerfile: workspace-for-linux/app/Dockerfile
```

## MacOS
以下環境で検証しました。 

```
os: macos
docker: 20.10.5
docker-compose: 1.29.0 
```


実行すると、次のような感じになります。

```
$ cd workspace
$ docker-compose build  
$ docker-compose run print_memo 
Creating network "workspace_default" with the default driver
Creating workspace_print_memo_run ... done
pwd is ./docker-path-test

$ cd ..
$ cd workspace-for-linux
$ docker-compose build  
$ docker-compose run print_memo        
Creating network "workspace-for-linux_default" with the default driver
Creating workspace-for-linux_print_memo_run ... done
pwd is ./docker-path-test
```

なんと同じフォルダを見に行きます。面白いですね ()

## Linux
以下環境で検証しました。
https://github.com/MokkeMeguru/docker-path-test/runs/2397135788
https://github.com/MokkeMeguru/docker-path-test/actions/runs/769480930

```
os: ubuntu-20.04
docker: 20.10.5
docker-compose: 1.29.0
```

```
# workspace
Step 5/6 : COPY .. /memo_dir
COPY failed: forbidden path outside the build context: .. ()
Service 'print_memo' failed to build
Error: Process completed with exit code 1.
# workspace-for-linux
Creating network "workspace-for-linux_default" with the default driver
Creating workspace-for-linux_print_memo_run ... 
Creating workspace-for-linux_print_memo_run ... done
pwd is ./docker-path-test
```

`forbidden path outside the build context: .. ()` が表れていることが確かに確認できると思います。ﾊﾊｯ

# 対策

`COPY .. <path>` は極力使わないようにしよう
Oracleの各テーブルのカラム数を調べたい場合のSQL

####パフォーマンス調査で、テーブルのカラムの最大数を調べたいケースが出たので、SQLを作ってみた。

```sql:all_tab_column_count.sql
SELECT TABLE_NAME ,COUNT(*) as COUNT
FROM ALL_TAB_COLUMNS  
GROUP BY TABLE_NAME
ORDER BY COUNT DESC;
```

今回の場合はALL_TAB_COLUMNSに存在するTABLE_NAMEカラムでグルーピングした項目の数をCOUNTした上で降順にしている。


####ALL_TAB_COLUMNSについて
ALL_TAB_COLUMNS は以下のような情報を持つテーブルです。
>DBA_TAB_COLUMNSは、データベース内すべての表、ビューおよびクラスタの列を示します。
>USER_TAB_COLUMNSは、現行のユーザーが所有する表、ビューおよびクラスタの列を示します。このビューは、OWNER列を表示しません。

詳細については以下のリンク参照。
https://docs.oracle.com/cd/E16338_01/server.112/b56311/statviews_2103.htm

あんまり使うことはないかもしれないが、備忘も兼ねて記載。
if文 ⇒ Switch分への書き換えの条件

***
###■　2つの文の構造と書き換えの目的
######【 if文 】

```
if (条件式) {
　条件式がtrueのときの処理
} else {
  いずれの条件式もfalseのときの処理
}
```

######【 Switch文 】

```
switch (条件値<変数>） {
case n（整数）:
　条件式がnのときの処理
　break;
default:
　条件式がn以外のときの処理
　break;
}
```
分岐が2つの場合、if文はifとelseのみで書くことができるため、if文のほうが記述が端的で見やすいが、以下多分岐の場合

######【 if文 】

```
if (条件式1) {
　条件式1がtrueのときの処理
} else if（条件式2） {
　条件式2がtrueのときの処理
} else if（条件式3） {
　条件式3がtrueのときの処理
} else if （条件式4）{
　条件式4がtrueのときの処理
} else {
  いずれの条件式もfalseのときの処理
}
```

######【 Switch文 】

```
switch (条件値<変数>） {
case n（整数）:
　条件式がnのときの処理
　break;
case l（整数）:
　条件式がlのときの処理
　break;
case o（整数）:
　条件式がoのときの処理
　break;
case p（整数）:
　条件式がpのときの処理
　break;
default:
　条件式がn以外のときの処理
　break;
}
```
多分岐の場合はSwitch文のほうが、ソースコードは長くなるが見やすくなり、また実行速度も速いとされている


***
###■　if文 ⇒ Switch文へ書き換えられる条件
Switch文を使用する際には、以下2点

1．すべての条件式が「変数 == 値」や「変数 == 変数」のように、左辺等辺が一致するかどうかを比較する式であり、「<、>、!」などが使用されていない
2．比較する値のデータ型が「byte、short、int、String、char」（整数、文字列、文字）のいずれかであること（小数や真偽値には使用できない）
【初心者でもわかる】「今日から始めるwebp対応」

#どうも7noteです。今日から始めるwebp対応と題して、これからSEO対策やUI・UX改善のためにwebpを使いたい人必見の内容です。


ウェブピ...
じゃなかった、webp（ウェッピー）を始めたいと思った時に

・webpって何？
・どうやって画像つくるの？
・そもそも対応必要？

そんな方向けに**webpのいろはを解説します！**


## webp画像とは？

### webp（ウェッピー）・・・web制作においてjpgに変わる新しい画像フォーマット。
jpgよりも高い圧縮率を誇り、何人かの物好きな人が圧縮率を計測した結果としてもwebpの方若干優れているか同等くらいの評価をしている記事をよく見かけます。

### HEIFとは何が違うの？

HEIFはios11以降のiphoneで撮影された画像の形式（拡張子は.HEIC）で使われるもので、web制作のためにHEIFを使うというのは現状まだ行なわれておりません。（ブラウザ非対応）
画像という分類では一緒ですが、用途が異なるのでweb制作の中で現段階では全く別物という認識で問題なさそうです。

### 対応ブラウザ

https://caniuse.com/?search=WebP

macのsafariだけ対応するものしないものが分かれるが、モダンブラウザでは基本表示が可能。
IEさえ無視できるwebサイトであれば、webpは対応しておくべきと言えそう。

※IEは非対応
※safariも一部以外非対応（macOS最新版のBigSurは対応済）


### 圧縮率は？

***「本当に圧縮率が高いの？画質あらいんじゃない？」***

実験してみました。
結果を**どんっ！**

|実用可能レベル|画像|画質|圧縮処理|拡張子|ファイルサイズ|
|:--|:--|:--|:--|:--|:--|
|◎|png|標準|-|png|83KB|
|◎|jpg（画質100%）|100%|-|jpg|63KB|
|◎|png（webp変換）|標準|-|webp|56KB|
|◎|jpg（画質100%・圧縮）|100%|〇|jpg|38KB|
|◎|jpg（画質80%）|80%|-|jpg|38KB|
|◎|jpg（画質80%・圧縮）|80%|〇|jpg|33KB|
|◎|png（圧縮）|標準|〇|png|21KB|
|◎|png（圧縮・webp変換）|標準|〇|webp|18KB|
|使用不可|jpg（画質100%・webp変換）|100%|-|webp|15KB|
|使用不可|jpg（画質80%・webp変換）|80%|-|webp|15KB|
|使用不可|jpg（画質100%・圧縮・webp変換）|100%|〇|webp|12KB|
|使用不可|jpg（画質80%・圧縮・webp変換）|80%|〇|webp|12KB|


※圧縮はいつもお世話になってるパンダさんで圧縮しています。（https://tinypng.com/）

写真と文字入りの同じ画像を6種類の書き出しパターン用意し、それぞれのwebp変換と合わせた計12種類の容量を比較してみました。
その結果、実際に目視で画質をチェックした感じでは「jpg書き出しからのwebp変換した画像」は品質的に使用不可レベルまで画質が落ちてしまいました。
（webpでは画質レベルを設定できますが、今回はjpgもpngもデフォルトの75%で書き出ししています。）

この結果から、**「基本画像はpng書き出し」からの「webp変換」が一番作業効率と品質のコスパがよさそう**というのが私なりの結論になります。
調べたところによると**webpはpngからの変換の方が向いているようです。**（変換する際の細かい設定によって結果は変わるとおもいますが・・・）


## webp画像の作り方

###「webp画像の作成ツール」

**・コマンドを使った方法。一括変換もあり。**
https://developers.google.com/speed/webp （googleが開発 win・mac対応）

**・フォトショップの拡張機能でwebpを使えるようにする方法**
https://developers.google.com/speed/webp/docs/webpshop （googleが開発 win・mac対応）

**・ブラウザ上だけで変換可能なオンラインツール**
https://convertio.co/ja/jpg-webp/


### 設定方法

https://cookbook.xrea.jp/html-cookbook/image/webp.php

こちらのサイトの通り設定したところwindows環境では無事動きました。
mac環境でも現在調整中ですので、またチェックが完了したら追記します。

## まとめ


ウェブピ...
じゃなくてウェッピーなんてかわいい読み方ですが、google先生がコアウェブバイタル重視していくよって話があるので、IEやSafariの対応だけ注意すれば

ただWordpressなどでは完全に対応していないので、プラグインなどを調べて使っていく方法しかなさそうです。
こちらももう少し情報調べてわかれば追記していきます。


参考・参照↓
https://cookbook.xrea.jp/html-cookbook/image/webp.php
https://convertio.co/ja/jpg-webp/
https://blog.ideamans.com/2020/08/webp-params-2020.html


#### おそまつ！
~ Qiitaで毎日投稿中!! ~
[【初心者向け】WEB制作のちょいテク詰め合わせ](https://qiita.com/7note)
.phpファイルをEUC-JPで作成すると文字化けしてしまう

PHP5.6、文字コードEUC-JPで作られた古いサービスを、
PHP7.4、文字コードはそのままEUC-JPでバージョンアップさせる際に、
なぜか文字化けするなと思ったので、対処法をメモ。

拡張子が.phpのファイルは、文字コードが
・Shift_JIS
・EUC-JP
で、PHP5.6以上の場合文字化けしてしまうようです。

ApacheやPHPの設定を色々といじっても文字化けが直りませんでしたが、
ファイル先頭に以下を記載すると文字が正しく表示されました。

```
//Shift_JIS
<?php header("Content-Type: text/html;charset=Shift_JIS");?>

//EUC-JP
<?php header("Content-Type: text/html;charset=EUC-JP");?>
```
部分テンプレート内の変数利用


１.呼び出し1
-

###renderメソッド:指定したテンプレートを呼び出す時に使うメソッド

|重要|
|--|
|部分テンプレート名は_formとアンダーバーが付いていますが、呼び出す際は_は付けません。|

|メソッド呼び出し先|
|--|
|render 'ファイル名'|
|render :アクション名|
|render partial: 'ファイル名'|

(注意)renderメソッドを記述したビューファイルと違うフォルダ内の部分テンプレートを呼び出すときは hoges/hogeのようにどのフォルダの部分テンプレートを使用しているかを記述する必要があります。

ビューファイル -->
render partial: 'hoges/hoge'
下の例だと_right_content.html.erbはこのコードを記述しているindex.html.erbと同じフォルダにあるのでそのままファイル名を記述すれば呼び出すことができます。

参考：Pikawakaさん　：「【Rails】部分テンプレートの使い方を徹底解説！」
>https://pikawaka.com/rails/partial_template

部分テンプレート上での変数の呼び出し
-

|オプション名|働き
|--|--|
|localsオプション|localsオプションを使うと部分テンプレート内で使う変数の定義

```rb:viewfile
#定義方法
<%= render partial: 'ファイル名', locals: { '部分テンプレート内で使う変数': '変数に入れる値' } %>

#使用例
<%= render partial: 'hoge', locals: { hoge: 'こんにちは' } %>
```

重要
-


|localsオプションを使った場合はpartialは省略できません。|
|-|
|partialを省略して書きたければ必ずlocalsオプションも省略しないといけないので注意しましょう。

```
<%= render 'hoge', hoge: hoge %>
```

変数を複数定義
-

```rb:viewfile
<%= render partial: 'hoge', locals: { name: "前田", adress: "兵庫県神戸市", age: ３６ } %>
```

```rb:view
<P>私の名前は<%= name %>です</p>
<P>私は<%= adress %>在住です</p>
<P>年齢は<%= age %>です</p>
```

```rb:表示
私の名前は前田です。
私は兵庫県神戸市在住です。
年齢は３６です。
```

１.呼び出し2
-

|オプション名|働き
|--|--|
|collectionオプション|①collectionオプションを使用するとcollectionオプションに指定した変数の要素の分だけ部分テンプレートが繰り返し表示されます。そうすると自動で一つ一つの要素が取り出され部分テンプレートに渡されて繰り返し表示されるという流れになります。                                                                      ②collectionオプションを使用する時はpartial:を記述しないとエラーになるので気をつけましょう。


```ruby:ビューファイル
<%= render partial: 'hoge', collection: 繰り返し表示する要素が入っているインスタンス %>
```
重要
-

|部分テンプレート内で使う変数を変更する場合|
|--|
|collectionオプションを使用した場合、部分テンプレート内で使用する変数はオプションで指定した変数が@hogesであったらその単数形のhogeになります。|

```ruby:ビューファイル
<%= render partial: 'hoge', collection: @hoges, as: "fuga" %>
```
Ubuntu: NVIDIAのドライバはどれをインスールすればよいのだ？

# 概要

Ubuntuの話。
`nvidia-driver-*` がいっぱいあってどれをインストールすれば良いのかわからないときの対応です。

# 結論

`ubuntu-drivers devices` を実行すれば教えてくれる

# 対応

## 1. `ubuntu-drivers` を使うために `ubuntu-drivers-common` をインストール

```
$ sudo apt install -y ubuntu-drivers-common
```

## 2. `ubuntu-drivers devices` を実行

`ubuntu-drivers devices` を実行すると以下のような出力があります。

```
$ ubuntu-drivers devices
== /sys/devices/pci0000:00/0000:00:1e.0 ==
modalias : pci:v000010DEd00001EB8sv000010DEsd000012A2bc03sc02i00
vendor   : NVIDIA Corporation
driver   : nvidia-driver-450-server - distro non-free
driver   : nvidia-driver-460-server - distro non-free
driver   : nvidia-driver-418-server - distro non-free
driver   : nvidia-driver-460 - distro non-free recommended
driver   : nvidia-driver-450 - distro non-free
driver   : xserver-xorg-video-nouveau - distro free builtin
```

何行か出ましたが `recommended` に注目すれば良いです。

## 3. `recommended` がついてるドライバをインストール

`recommended` が付いているのが以下のドライバなので、それをインストールします。

```
driver   : nvidia-driver-460 - distro non-free recommended
```

```
$ sudo apt install -y nvidia-driver-460
```

# まとめ

`ubuntu-drivers` がオススメしてくれたドライバをインストールすれば良いのではなかろうか。
CSS Flexboxとプロパティ

#柔軟な表示を可能にする要素「display: flex;」

エレメントに「display: flex;」というプロパティを配置すると、
柔軟なウェブページにできる様々なの機能を使えるようになる。

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes

##縦に配置するか横に配置するかを指定する要素「flex-direction」

“親要素”に「display: flex;」、「flex-direction:（値）」を指定すると、
その“子要素”にflex-directionを行配置または列配置にできる。

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row

##文書内の要素の配置を揃える「justify-content」「align-items」

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property

##拡大する・縮小する・基準を決める「flexプロパティ」

```

flex: （拡大率）, （縮小率）, （サイズの基準）;

```
flexにある要素は、それぞれflex-grow, flex-shrink, flex-basisとして指定できる。

```

i.e.)
#(なにかしらのCSS要素)　{
flex-grow： 1;
/*拡大係数（相対的な倍率）を１に指定する*/
}

```

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-flex-shorthand-property


##順序を指定するorder

デフォルトでは先に表記した要素が先に表示されるが、
orderの番号を指定することで、番号の若い順に要素を表示させることができる。

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items

##要素の配置を個別に指定する「align-self」

プロパティ「align-self」は、Aを中央揃え、Bを右揃えというふうに、配置を要素ごとに指定できる。

https://www.freecodecamp.org/learn/responsive-web-design/css-flexbox/use-the-align-self-property
Rails time_zoneを設定して日本時間を表示させる。


<br>
##はじめに
Railsで特に設定しないとUTC(世界標準時間）が表示されます。
でもそれじゃあ、投稿した時間がユーザーがいる場所とは違う時間が表示されてしまいます。
created_atの時間がおかしな時間になってて、なんだこれって思ったことはありませんか？
created_atの時間は環境変数に設定されたものではなくapplication.rbに設定されたものが使われます。

  
そこで、Railsではapplication.rbをいじって日本時間などのタイムゾーンを設定し
表示をさせてみます。

<br><br>

##application.rbに設定をする
```ruby:application.rb
require_relative 'boot'

require "rails"
# Pick the frameworks you want:
require "active_model/railtie"
require "active_job/railtie"
require "active_record/railtie"
require "active_storage/engine"
require "action_controller/railtie"
require "action_mailer/railtie"
require "action_mailbox/engine"
require "action_text/engine"
require "action_view/railtie"
require "action_cable/engine"
require "sprockets/railtie"
# require "rails/test_unit/railtie"

# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)

module ToDoApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0
    ＊ここに書きます。＊

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    # Don't generate system test files.
    config.generators.system_tests = nil
  end
end
```
#####記述します。

```ruby:application.rb
module ToDoApp
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 6.0
    config.time_zone = 'Tokyo'
    config.active_record.default_timezone = :local

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    # Don't generate system test files.
    config.generators.system_tests = nil
  end
```
<br>
##rails consoleで試してみる

#####現在の時刻を表示させるにはTimeWithZoneクラスを使います。

```
Time.zone.now
```

<br>
#####まずは設定しないで表示させてみましょう。
[![Image from Gyazo](https://i.gyazo.com/23f34fe89a10c3718ad7dbba10f31975.gif)](https://gyazo.com/23f34fe89a10c3718ad7dbba10f31975)
#####次に設定して表示させてみます。
[![Image from Gyazo](https://i.gyazo.com/d2b8383fa30ea0fd46a2a4504259766a.gif)](https://gyazo.com/d2b8383fa30ea0fd46a2a4504259766a)


できました。


>参考サイト
[(Qiita) RubyとRailsにおけるTime, Date, DateTime, TimeWithZoneの違い](https://qiita.com/jnchito/items/cae89ee43c30f5d6fa2c#2021211%E8%BF%BD%E8%A8%98datetime%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AF%E9%9D%9E%E6%8E%A8%E5%A5%A8%E3%81%AA%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AB%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%97%E3%81%9F)
Android Chromeで背景画像が表示されない問題

一部のAndroid端末で、CSSのbackgroundで指定した画像が表示されない問題に遭遇。
Android Chromeの機種依存バグ。
(Oppo Reno A(Andorid OS 9)で再現)
PCブラウザやiOSでは問題ない。Androidでも再現しない端末もある。というか、再現する端末の方が少ない模様。
自分の手元端末では再現していないので、詳細な検証はできていない。

### 対処法
以下の対処により解消した。
どれかまたは複数により解決する可能性がある。

- 背景画像の指定を::before, ::after擬似要素にする
- backgroundプロパティを background-repeat, background-size, background-imageなどに分解して記述
- background-sizeは、`100% auto`と縦横２つ指定していたのを、`100%`と片方のみで指定（場合によっては画像の方を修正する必要があるかもしれない）
- z-indexプロパティを指定

このようなつまらないバグによるリソースの浪費を減らすべく、ネットの片隅に投じておく。
DatabricksにおけるApache Sparkアプリケーション開発のご紹介

[An Introduction to Writing Apache Spark Applications on Databricks \- The Databricks Blog](https://databricks.com/blog/2016/06/15/an-introduction-to-writing-apache-spark-applications-on-databricks.html)の翻訳です。

> この記事は3パートからなる「DatabricksにおけるApache Sparkアプリケーション開発のご紹介」のパート1となります。サンプルノートブックは[こちら](https://github.com/taka-yayoi/public_repo/tree/main/spark%20intro%20part1)からダウンロードできます。

数年前にApache Sparkを学び始めたとき、私にとって最大の課題は、Sparkアプリケーションを効率的に開発する際に必要となるキーコンセプト、考え方を説明した資料を探し出すことでした。UCバークレー校の大学院生の時、AMPキャンプとSparkサミット SF 2015に参加しました。これらは基礎を学ぶには大変素晴らしい体験でしたが、基本的なワードカウントの先を学習するためにサンプルを見つけることは容易ではありませんでした。しかし、6ヶ月前からDatabricksで働き始めたときには状況は一変していました。

> 訳者注 本記事の執筆は2016/6/15です。

Databricksにはユーザー向けの素晴らしいリソース(Databricks Guide:リンク切れ)が存在していました。しかし、私は、多くのユーザーがより詳細かつエンドツーエンドのサンプルを通じてApache Sparkへの理解を深めたいと考えていることを知りました。よく私は、「どうやってデータフレームやSparkSQL、データセットを使えばいいのですか？」、「どのように機械学習パイプラインを作ればいいのですか？」、「どのようにUDF(ユーザー定義関数)を作って、Spark SQLでどのようにデータフレームに適用したらいいのですか？」と言った質問を受けました。これが、これらの質問に答えるために3つのチュートリアルをDatabricksのノートブックの形で作成するに至った背景です。

フリーのプラットフォームである[Databricksコミュニティエディション](https://databricks.com/jp/try-databricks)を活用いただくことで、誰でもこれらのノートブックをハンズオンとして実行することができます。まだ、コミュニティエディションにサインアップされていないのでしたら、ぜひサインアップしてノートブックを実行してみてください。

# 最初のチュートリアル

最初のチュートリアルは最も数が多い方々向け、Apache SparkやDatabrikcsを初めて触る方向けです。このノートブックでは、データに対する作業を容易にするDatabricksのツールをデモンストレーションするとともに、Apache Sparkクラスターの作成や、データの可視化、Spark UIへのアクセス方法などを説明します。Databrciksだけではなく、Apache Sparkのアーキテクチャ概観を理解することで、Sparkジョブの実行に際して何が起きているのかをより深く理解できるようになります。また、このノートブックは、自身がApache Sparkをきちんと理解しているのかを確認するのにも活用いただけます。

このチュートリアルでカバーする主なコンセプトは以下の通りです：

- Apache SparkとDatabricks用語の紹介
- Apache 2.0のSparkSessionコンテキストを含む、Apache Sparkにおける様々なコンテキスト、環境
- データフレーム、データセットなどの基本的データインタフェース
- Databricksコミュニティエディションにおいて、Apache Sparkクラスターがどのようにコードを実行するのか
![](https://databricks.com/wp-content/uploads/2016/06/spark-cluster-diagram.png)
- トランスフォーメーションとアクションの違い
- 以下に示す有向非巡回グラフ(DAG)のウォークスルー。Sparkが生データを最終形態に変換するまでに、どのようにトランスフォーメーションとアクションを用いるのか。Databricksは既にApache Spark2.0のプレビューを取り込んでいるため、クエリープランを作成する異なるバージョンのSparkを比較することができます。下にあるのは2.0のクエリープランです。

![](https://databricks.com/wp-content/uploads/2016/06/spark-dag-screenshot.png)

> 訳者注：2021/4/21時点ではSpark 3.1が利用できます。

最初のノートブックは[こちら](https://github.com/taka-yayoi/public_repo/tree/main/spark%20intro%20part1)からダウンロードできます。

# 次のステップ

最初のノートブックではハイレベルのコンセプトを紹介しましたが、パート２、パート３のノートブックではより詳細に入っていきます。パート２では、どのようにデータサイエンティストがSparkとDatabricksを使うべきかを説明します。ここでは、特定の郵便番号エリアでの農業市場を、特定のエリアにおける個人税、法人税に基づいて予測を行います。最後のノートブックでは、エンドツーエンドのETLパイプラインを説明します。これには、生のログファイルの解析、UDFの作成、汚いデータフレームの取り扱い、他のデータセットとの結合を説明します。これらにおいては、複数のデータソースを統合するために、Sparkが提供するデータコネクターを活用します。これらのノートブックには多くのコードと説明が盛り込まれていますので楽しみにしてください。

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)
ナビゲーションシステム

#jQueryとは
 JSでDOM操作を行う場合、ソース量が膨大になってしまい、重くなってしまうことが多々あります。
そのため、JSのライブラリとして存在するｊQueryを使ってコードの量を少なくしていきましょうということで、使われます。
JSのライブラリになるので、処理の実行内容は変わりません。取得して加工して出力する流れです。

```index.html
<div class="sidebar">
        <h2>サポートページ</h2>
        <div class="submenu">
            <h3>1. 初めて使うとき</h3>
            <ul class="hidden">
                <li><a href="">- 概要</a></li>
                <li><a href="">- インストールする</a></li>
                <li><a href="">- アカウントを登録する</a></li>
                <li><a href="">- アンインストールする</a></li>
            </ul>
        </div>
        <div class="submenu">
            <h3>2. 基本的な使い方</h3>
            <ul class="hidden">
                <li><a href="">- 基本的な操作方法</a></li>
                <li><a href="">- 元の状態に復元する</a></li>
                <li><a href="">- 機能拡張プラグインを追加する</a></li>
            </ul>
        </div>
    </div>
```

上記の内容でブラウザで表示するとh2,h3,タグのみが表示されるのではないかと。
ここで、jQueryを使ってDOM

```index.js
$(document).ready(function() {
    $('.submenu h3').on('click', function() {
        $(this).next().toggleClass('hidden');
    });
});
```
一行目に書かれているのは、HTMLが読み込まれたら、処理を始めるよという合図です。関数処理が始まりますが、更に関数処理が入ってきます。
(取得した要素)今回はsubmenu.on(イベント名（clickイベント）,function() 
イベント発生の処理▶　this(submenu).next(これはjQueryのオブジェクトに変えてくれます)
toggleClassは、（）内で指定されている要素がなかった場合は、削除、あった場合は追加してくれます。

>　出典
>https://www.amazon.co.jp/%E7%A2%BA%E3%81%8B%E3%81%AA%E5%8A%9B%E3%81%8C%E8%BA%AB%E3%81%AB%E3%81%A4%E3%81%8FJavaScript%E3%80%8C%E8%B6%85%E3%80%8D%E5%85%A5%E9%96%80-%E7%AC%AC2%E7%89%88-%E7%8B%A9%E9%87%8E-%E7%A5%90%E6%9D%B1/dp/4815601577
React tutorial復習

# React基本
- reactはデータが変更となると再度レンダリングする。

```react
class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}
```
ここの場合、shopping listはreact component classです。あるいはreact component typeと呼ばれます。そのパラメーターはpropsといいます。propertiesです。

上記の`<div.....`は以下のものと同義です。

```jsx
return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h1', /* ... h1 children ... */),
  React.createElement('ul', /* ... ul children ... */)
);
```

# Why Immutability Is Important
一般的にはデータを書き換えるのに2パターンがあります。


- 元データを上書きして修正する

```jsx
var player = {score: 1, name: 'Jeff'};
player.score = 2;
// Now player is {score: 2, name: 'Jeff'}
```
- 元データのコピーを作成して元データをれプレースする

```jsx
var player = {score: 1, name: 'Jeff'};

var newPlayer = Object.assign({}, player, {score: 2});
// Now player is unchanged, but newPlayer is {score: 2, name: 'Jeff'}

// Or if you are using object spread syntax proposal, you can write:
// var newPlayer = {...player, score: 2};
```
これによって得られるメリットは：
- シンプル化：過去の履歴は参照可能になるという機能は実現が簡単
- 変更は察知可能
- 主要なメリットはこれ：re-renderingのタイミングがわかりやすくなる

# function componentはstateを含まず、classですとstateがある
[Vue 3]app.config.globalPropertiesがundefinedと言われてしまった人の忘備録

## はじめに
Vue2から3にアップデートするにあたり、vue-xxx シリーズが片っ端から陳腐化してしまったため、
app.config.globalPropertiesに自分でプログラムを置くことにしました。
ところが、そこにちいさな躓きポイントが結構あったため忘備録として起きたことと解決までを記述してます。

## 環境
Vue ^3.0.5

↓今回入れたいアプリ↓
luxon ^1.26.0

## 問題発生

``` javascript:app.js
const {DateTime, Interval} = require("luxon");
import { createApp, h } from 'vue';
const el = document.getElementById('app');
let app = createApp({}).mount(el);

//Uncaught TypeError: Cannot read property 'globalProperties' of undefined
app.config.globalProperties.$luxonDateTime = DateTime;

```

`app.config`に`globalProperties`が無いよと言われている。

## ますは仕様を確認
この解決法を見つけたのはStackoverflowの以下の記述だったので、重要な情報が抜けている可能性がある。
https://stackoverflow.com/questions/67029689/importing-vue-luxon-for-vue-v3-this-luxon-is-not-a-function-error

というわけで、本家Vue3さんに仕様を確認しに行く
https://v3.vuejs.org/api/application-config.html#globalproperties

どうやら**間違いなく存在する**ようだ。

## とりあえずconfigの中身を見てみる
上記ページの一番最初に`console.log(app.config)`で確認してみろと書いてあったのでやってみた。

```javascript:app.js
//...

let app = createApp({}).mount(el);

console.log(app.config); //undefined

app.config.globalProperties.$luxonDateTime = DateTime;
```

**なんと出力は`undefined`だった。**

## なんか怪しいぞ？
仮にバージョンを間違えていた等の根本的な問題があったとしても、さすがに`app.config`が空というのはおかしい。
そこで初めて、 `createApp({}).mount(el)`←これの戻り値がおかしいのではないか？と気が付く。

以下のように書き換えてみた。

```javascript:app.js
//...

let app = createApp({});
app.mount(el);

console.log(app.config); //Object
```

出てきた！

## 解決
というわけで、今回の原因は、
**app本体が入っていると思っていた変数に`mount()`の戻り値が入ってしまっており、期待した値ではなかった**
でした。
ちゃんと関数の戻り値は確認しようね！


※componentの読み込み系はすべて省略しています。自分で増やしてください。

```javascript:app.js
//..

let app = createApp({});
app.mount(el);

app.config.globalProperties.$luxonDateTime = DateTime;
app.config.globalProperties.$luxonInterval = Interval;
```

```vue:index.vue
//...
<script>
export default {
  name: "Index",
  data() {
    return {
      now: this.$luxonDateTime.now()
    }
  }
}
</script>

//..
```

無事動きました！！
Reactでのテスト

<span style="font-weight: 400">こんにちは、<a href="https://www.humancrest.co.jp/">ヒューマンクレスト</a>のマイです。</span>

現在自社サービス開発でReactというJavaScript(JS)ライブラリを使っております。

開発ではテストが欠かせないので、テストを意識しながら、開発を進めています。今回はReactのテストについての話をしたいと思います。

<h1>Reactとは</h1>
<h3>SPA(Single Page Application)</h3>

Reactを紹介する前に、 SPAについて軽く説明したいと思います。近年、GmailやFacebookなど、ネイティブアプリケーション並みの機能を持っているサイトが増えてきました。その背景には、SPA(Single Page Application)と呼ばれるアーキテクチャがあり、またReactやAngularなどのライブラリ/フレームワークのサポートにより、Web開発者にとってSPA開発がより手軽で身近になってきています。

SPAとは単一のページでコンテンツの切り替えを行うWeb アプリケーションのことです。従来のWeb ページでは遷移時にページ全体が書き換わりますが、SPAでは 変更された部分だけ反映される仕組みになっています。実際には、JavaScript を用いてページ内の HTML の一部を差し替えてコンテンツを切り替えています。

それにより下記の２つのメリットが挙げられます。

まずは通常のWeb ページでは実現できないユーザー体験(UX)を実現できることです。ブラウザの挙動に縛られないことから、より幅広い UI を実現することができるため、UXを向上させることができます。Facebookを使っている人はチャットウィンドウを表示しながら、NewsFeedを眺めたり、Statusを更新したりすると思いますが、これもSPAで実装された機能です。
チャットウィンドウを開いても画面遷移自体はしないため、他のところでブラウジングできます。

次に高速なページ遷移を実現できることです。上記にも記載していますが、SPAでは遷移先のページを構成するために必要最小限のデータのみを取得し、ブラウザでHTMLを構築するため、従来のWebページと比較してページ遷移が高速になります。

SPAの代表的なものはReact.js, AngularJS, Vue.jsがあります。
<h3>React</h3>

ReactはUIの構成部品を作るためのJavaScriptライブラリでFacebookが開発したものです。Reactはメモリー上の変更前後のDOMを持ち、変更があった部分を検出し、本当に変更が必要な部分のみを画面に反映します。

それを実現するために、Virtual DOMというものを採用しています。

従来、状態などの情報が変化した場合は、ふたたび情報を受け取りHTMLを再作成してブラウザに再描画をおこないます。Reactでは情報が受け渡されてもいきなり描画は行わずVirtual DOMとよばれる構造体を作成してからVirtual DOMの内容を元にHTMLを作成してブラウザに描画します。

そして情報が変化した場合は、まずVirtual DOMに反映を行なってから、Virtual DOMと現在のHTMLの内容の比較を行い、差分のみをHTMLに反映させてブラウザの再描画をおこないます。

SPAのメリットの他に、Reactのもう一つの魅力はコンポーネント指向、JSの中にHTMLを書くJSXを採用するため、メンテナンス性が高いコードが書けることです。

<h1>Reactのテスト</h1>
<h3>なぜテストするか</h3>

それはソフトウェア開発ですから、テストは要りますよね。おそらくここで反論する方はいないでしょう。

特にReactの場合はバージョンアップにより仕様が変わることがありますので、その時、自信を持ってリファクタリングできるように、テストを書いておきましょう。


<h3>何をテストするのか</h3>

<h4>renderメソッドのテスト</h4>

renderメソッドはReactコンポーネントを作成するにあたって唯一実装が業務付けられているメソッドです。renderメソッドをテストする時、下記の観点に基づいてテストを行うと良いでしょう。

・必ずレンダリングされること

最低限、コンポーネントがエラーを出さずに、確実にレンダリングされるようにします。JSXの構文エラーがなく、全ての変数が定義されていることなどを確認します。

これは一見意味があまりないように見えますが、非常に必要なところです。ReactはAPIを呼び出し、結果を表示するパターンがよくあります。何らかの原因でAPIから返してきたレスポンスが期待通りではない時、エラーがよく起きます。たとえレスポンスが正常でない場合でも、エラーにならず、何らかのメッセージをレンダリングするのを意識しなければなりません。

・アウトプットをテストする

上記の”レンダリングする”というステップは、”正しいものをレンダリングする”ということです。ReactはUIを注視したものなので、設定したものがきちんとレンダリングされるか、確認するのは必須ですね。

・条件を網羅する

条件付きのところは条件を網羅する必要があります。例えば、ユーザーモードとゲストモードがあるならば、しっかりテストしなければなりません。条件付きでレンダリングするところは特に注意が必要です。



<h4>イベントのシミュレーション</h4>

多くのReactコンポーネントはブラウザで発生するイベントに反応します。onClick、onChangeなど、イベントのトリガーがあるElementの場合、そのイベントが期待通りに働くか確認しなければなりません。Enzymeというライブラリを使えば、指定されたオブジェクトで任意のイベントを発火できます。


<h4>境界値のテスト</h4>

APIから戻っているレスポンスのデータが空、上限を超えるなどの場合を想定して、実装しなければなりません。また、表示の都合で1ページにて25項目で切り捨てなければならない場合などもありえます。テストはいかなる場合でも想定した動きを振舞うことを確認しなければなりません。

<h1>まとめ</h1>
今回はReactのテストの考え方について述べました。Reactは現在注目を集めていますので、これから何らかの形で関わる方が多いでしょう。今日の話で、少しでもReactに興味を持っていただければ幸いです。
Laravel+vueでなんか作る(Laravel基礎編②)

[Vue 3 and Laravel: A Practical Guide with Docker](https://www.udemy.com/course/vue-laravel-admin/)の備忘録

今回は初歩的なモデル・コントローラーを作成と
特定のルートにアクセスしたらメソッドが発動するまでをやる

##Routing基礎
``routes/api.php``にルートを追加する

```php:routes/api.php
Route::get("hello",fn()=>"hello");

//fn()=>"hello";
//is equivalent to
//function(){
//   return "hello";
//}
```
この省略表記すげーJSっぽいね……。
これで``api/hello``にアクセスすると「hello」と帰ってくる。
でもこれだけじゃ何もできないので、とりまModel、controllerと繋げる。

#Model作成
``php artisan make:model User``……しなくても、
アプリ作成時にUserモデルはデフォルトで作成されている。

```php:App/Http/Models
class User extends Authenticatable
{
    use HasFactory, Notifiable;
    protected $guarded = [];
    protected $hidden = ["password"];
}
```
``protected $fillable``がいわゆるホワイトリストで、
``protected $guarded``がブラックリスト。
``protected $hidden``に入ったプロパティはユーザーからは見えなくなる。

#Controller作成

``php artisan make:controller AuthController``し、
AuthController内にregisterメソッドを作る。

```php:AuthController

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
use Symfony\Component\HttpFoundation\Response;
//Userモデル、Request型、Response型、Hashクラスをインポート

//　　～　中　略　～

public function register(Request $req){
        $user = User::create([
            "first_name"=>$req->input("first_name"),
            "last_name"=>$req->input("last_name"),
            "email"=>$req->input("email"),
            "password"=>Hash::make($req->input("password"))
        ]);
        return response($user,Response::HTTP_CREATED);
    }
```

#RouteとControllerを繋げる

```php:routes/api
use App\Http\Controllers\AuthController;
//呼び出すコントローラーをインポート

//　～　中　略　～
Route::post("register",[AuthController::class,"register"]);
```
``post``メソッドの第一引数はルートurl
第二関数は``[呼び出すコントローラー::class,呼び出すメソッド]``。
これで```api/register``にPOSTすると``register``メソッドが発動する

##Request
Laravelの機能は非常にRailsに似たものが多いので、たとえ初学者でもRailsの経験があれば「わかる！ これ進研ゼミで習ったやつだ！」となり、大抵は機能についての細かな注釈を読まなくても何をやっているのか理解できる。
このRequestも、まあRailsだと名前が違うんだけど、だいたいコントローラ版ののバリデーションみたいなもんだと理解した。

というわけで``php artisan make:request RegisterRequest``する。

```php:RegisterRequest
    public function authorize()
    {
//認証関係の処理が必要な場合ここに色々書くらしい
//認証関係の処理がなければひとまずtrueをreturnさせる
        return true;
    }

    public function rules()
    {
        return [
            "first_name"=>"required",
            "last_name"=>"required",
            "email"=>"required|email",
//「emailっぽい」文字列じゃないとダメ
            "password"=>"required",
            "password_confirm"=>"required|same:password"
//Passwordと同じ文字列じゃないとダメ
        ];
    }
```
この「コントローラに入れるリクエストのバリデーションを独立したレイヤにする」っていう発想、とても良さそうに思える。業務未経験者の直感で恐縮ですが……。

でもって、これをコントローラ側で呼び出す。

```php:AuthController
use App\Http\Requests\RegisterRequest;
//RegisterRequestをインポート

class AuthController extends Controller
{
    public function register(RegisterRequest $req){
//ここでリクエストのバリデーションを指定
        $user = User::create([
            "first_name"=>$req->input("first_name"),
            "last_name"=>$req->input("last_name"),
            "email"=>$req->input("email"),
            "password"=>Hash::make($req->input("password"))
        ]);
        return response($user,Response::HTTP_CREATED);
    }
```
これでリクエストをバリデーションできるようになった。
簡単にユーザアカウントを作るバッチファイルのメモ

# 簡単にユーザアカウントを作るバッチファイルのメモ
かもなす<@kamonasu21c>
2021-04-21

## 概要

Windows10のローカルユーザは、作るのに意外と手間がかかります。共用PCなんかで複数のアカウントを作っていくとなると結構面倒です。そこで、コマンドプロンプトでユーザーアカウントを作る応用としてバッチファイルを作ってみました。

## 目的

私の所属するゼミには学生(10名未満)が共用で利用するPCが3台あり、これは大学のActive Directoryとは切り離されて運用されています。  
これまではこのPCに一つだけローカルアカウントを作り、全員がそのアカウントを利用するという形態をとってきました。

ですが、新型コロナウイルスの流行などでGoogle ClassroomなどのLMSを利用するようになると、この運用では少々不都合が生じてきました。そこで、学生一人一人に個人アカウントを割り当てることとしました。

しかし、個人アカウントの割り当てを3台×人数分行うことは、非常に手間がかかります。そこで、その手間を省くために、今回バッチファイルを作成することとしました。

## 要件

* 文系の学生でも簡単に操作できること。
* 迅速にローカルアカウントを作成できること。

### 操作面

私の所属する研究室は文系研究室ですから学生の平均的なPCスキルは非常に低いです。そこで、そのような学生でも簡単に操作できるよう、疑似的なGUIとなるようにコメント機能を利用することにしました。

### 迅速さ

手間を省くことが目的ですから、ユーザ名とアカウントを入力するだけでローカルアカウントが作成できるように設計しました。

## できたもの

次のバッチファイルを作成しました。

これを管理者権限で実行することにより、簡単にローカルアカウントを作ることに成功しました。

```bat:accountadd.bat
        @rem システム関係をイジるので、このパスに動かします。
cd C:\Windows\system32
    rem 名前を入れてください。
        @rem ユーザ名を入力させ、変数"Username"に格納する。
set /p Username="INPUT:"
    rem パスワードを入れてください。
        @rem パスワードを入力させ、変数"Password"に格納する。
set /p Password="INPUT:"
        @rem ユーザ名とパスワードが格納された変数をそれぞれ呼び出し、ローカルアカウントを作成する。
net user "%Username%" %Password% /add
        @rem 管理者権限で実行しないと動きません。
        @rem 変数名="INPUT:"で変数をユーザに入力させることができる。
```

### 解説

ここでは、記述した内容について解説することで、自分が次バッチファイルを書く時の忘備録としています。基本事項なので「知っとるわい！」という感じでしょうが許してください。私は勉強しながら書いたので。

#### ＠rem

＠remは実行画面に表示されない、本当の意味でのコメントです。

一応これを読めばどこがどのように動いているかわかると思います。

#### rem

こちらもバッチファイルのコメントですが、こちらは```echo off```を記述しないかぎり、実行画面に表示されます。

実行画面に表示されることを逆手に取り、「名前を入れてください」などの文字列を表示させて疑似的なGUIにしています。

#### cd C:\Windows\system32

普通にコマンドプロンプトを管理者権限で起動すると勝手にこのパスから始まります。ですが、バッチファイル経由だと管理者権限で実行してもどうやらそのようにならないので、```cd C:\Windows\system32```を最初に記述して移動させています。

#### set /p 変数名="INPUT:"

バッチファイルでは```set /p 変数名="文字列"``で変数に文字列を代入できるようです。

また、文字列の代わりに```"INPUT:"```とすると、ユーザがその場で入力した文字列を代入できます。

これによって疑似的な入力フォームを実現しています。

#### net user

net userはコマンドプロンプトでユーザアカウントを扱う基本的なコマンドです。

通常、

```
$ net user ユーザ名 パスワード /add
```

と入力するところに、

```bat
net user "%Username%" %Password% /add
```
という形で、先ほど定義した変数Usernameと変数Passwordを自動入力させるようにし、すぐにローカルユーザが作成されるようにしています。

#### "%Username%"

このように変数名をダブルクォーテーションでくくることにより、変数名の中にスペースが含まれていても正しく動作します。逆にくくらないと、```Username="Kotori Otonashi"```などとなったときに正しく動作しません。(```Username="GoldShip"```なら動きますが。)

## おわりに

バッチファイルは簡単にかけ、予備知識ゼロで勉強しながらでしたが、すぐに書けてしまいました。これで作業効率はグンとあがりましたし、作業のやり方も簡単になったので、次年度以降後輩に運用を託すことができると思います。

あえて一か所苦しんだところといえば、ユーザ名で苗字と名前の間にスペースを入れると動作しなかったところでした。その旨Twitterに書き込んだところ、すぐに「ダブルクォーテーションでくくる！」と教えてくださったeXpresserさま(@eXpresser )に心より感謝いたします。

そういうわけで備忘録は以上になります。
Flexboxを使ってTポイントカードを作ってみた

Flexboxの理解を深めるためにTポイントカードを作ってみました
![スクリーンショット (43).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/2fceb3fe-2496-87a9-4f45-98b2a2dc2a42.png)

#はじめに

Flexboxの基礎を理解するため記事にしました。

↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　フィンランドの国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

ここまで出来たらcodeを書いていきます♪ ※head部分は省略

##code

```html
<div class="container">
      <div class="flag">
        <div class="box">ボックス１</div>
        <div class="box">ボックス２</div>
      </div>
    </div>
```
```css
.container {
  width: 500px;
  height: 300px;
  margin: 200px auto;
}

.flag {
  width: 100%;
  height: 100%;
  background-color: yellow;
}

.box {
  width: 36%;
  height: 60%;
  background-color: blue;
}
```

この状態を一旦ブラウザで確認　↓
`Flexbox`を指定してないので、
<font color ="blue">青色のボックス2個が縦並びになっています

![スクリーンショット (44).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/092b04a7-a5be-d409-fccb-bd3bf0854533.png)

`display: flex;`を指定します

```css

.flag {
  width: 100%;
  height: 100%;
  background-color: yellow;
  display: flex; ※
}
```

`display: flex;`　を指定したことで、<font color ="blue">青色のボックス2個が横並びになりました

![スクリーンショット (45).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/a0424d5b-e47d-88cc-76b8-3e84b9a0b5c7.png)



`justify-content: space-between;`を指定してみます

```css
.flag {
  width: 100%;
  height: 100%;
  background-color: yellow;
  display: flex; 
  justify-content: space-between; ※
}
```

`justify-content: space-between;`は水平方向の揃えをします。
<font color ="blue">青色のボックス2個も水平に`space-between`しました


![スクリーンショット (46).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/8d0412dc-6d4f-e275-6fbe-d32d5fb2541d.png)

最後に`align-items: flex-end;` を追加してみます


```css
.flag {
  width: 100%;
  height: 100%;
  background-color: yellow;
  display: flex; 
  justify-content: space-between;
  align-items: flex-end; ※
}
```
`align-items: flex-end;`は垂直方向の揃え、`flex-end;` することで<font color ="blue">青色のボックス2個も`end`側に移動しました

これでTポイントカード完成です！！

![スクリーンショット (48).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/4a59239c-71e8-a8c1-f0be-bdffabdfa617.png)

##まとめ
`Flexbox` の`Flexコンテナー`を一つづず理解することで、自由にcodeが書けます
組み合わせによって、色々な表現も出来るんだなと実感可能
引き続き`code`を書きながら試していこうと思います

今回は以上です
ありがとうございます！
Basic認証・導入の手順

# 概要
### Basic認証の手順を忘れてしまうのでここに記述します。
### ※MacのバージョンはCatalina以降です

# 手順
## 1.app/controllers/application_controller.rb内にBasic認証を記述。
## 2.ターミナルで環境変数を設定
## 3.「iキー」を押し、インサートモードに移行。Basic認証を記述。
## ４.app/controllers/application_controller.rb内のBasic認証を変更。

# 1.app/controllers/application_controller.rb内に記述
```app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth


  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'admin' && password == '2222'
    end
  end
end
```
### before_action :basic_authを記述し、Basic認証が優先的に行えるように記述する。
### basic_auth内にusername == 'test' && password == '1234'とusername,passwordに任意の文字・数字を記述する。しかし、このままではセキュリティ上問題があるため環境変数を設定する。

# 2.ターミナルで環境変数を設定
### ターミナルで「vim ~/.zshrc」を入力
```ターミナル
% vim ~/.zshrc
```
# 3.「iキー」を押し、インサートモードに移行。Basic認証を記述。
### iキーを押すと以下の用に「--INSERT--」と表示されればインサートモードへの移行が成功。

```ターミナル
~
~
~
~
~
--INSERT--
```
### インサートモードに移行したら任意のBasic認証を記述
```ターミナル
export BASIC_AUTH_USER='test'
export BASIC_AUTH_PASSWORD='1234'
~
~
~
~
~
--INSERT--
```
###Basic認証を入力したら「:wq」と入力し、内容を保存し、終了。
# ４.app/controllers/application_controller.rb内のBasic認証を変更。
```app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth


  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"]  # 環境変数を読み込む記述に変更
    end
  end
end
```
### 以上の手順でBasic認証を行うことが出来る。

# まとめ
### MaｃのバージョンがMojave以前の方は「vim ~/.zshrc」の部分を「vim ~/.bash_profile」と入力してください。
createアクションが動かなかったのは再代入のため

やはりMVCで引っかかる前田です。

今回はフリマの編集機能を実装していて起こりました。

環境
-

ActiveHash使用
Active Storage使用
pry-rails使用



本題
-

ほとんど実装できてあと編集というところでViewが悪いのか何度か間違いを探っていました。
ですが、上の@マークのアクションはうまくいいくのに、下のcreateアクションはうまく行ってくれませんでした。


```rb
  def update
    @item = Item.find(params[:id])　#itemテーブルからきたデータの受け渡し
    @item = Item.update(item_params)　#itemテーブルへ保存
  end
```

んんん？
-

###保存だけなのにさらにインスタンス変数に再代入してますね！
###@item=が余分です。
###目的はテーブルに保存するだけなので



```rb
  def update
    @item = Item.find(params[:id])　#itemテーブルからきたデータの受け渡し
    Item.update(item_params)　#itemテーブルへ保存
  end
```


問題解決です
Devise と Active Admin  で異なる認証（authentication_key）を使う方法

- 「ユーザー」 は `username` でログイン 
- 「管理者」 は `email` でログイン

のように、認証を異なる方法にしたくて悩んでいたところ簡単な方法を見つけました。

- `devise.rb` の `config.authentication_keys = [:email]` の１行をコメントアウト
- `admin_user.rb` の `devise` を `devise authentication_keys: [:email]` に変更
- `user.rb` の `devise` を `devise authentication_keys: [:username]` に変更

最初は `devise.rb` の `config.authentication_keys = [:email]` の `:email` を `:username` と変えましたが、「管理者」も `username` で認証することとなってしまい、エラーが出ました。

【参考記事】 https://stackoverflow.com/questions/4633077/how-to-use-different-authentication-keys-for-two-devise-models
Java APIとは何か

***
###■　APIとは
"Application Programming Interface"
簡潔にいうと、外部から呼び出して利用するシステム
例えば「Facebook Graph API 」
 facebookのユーザー情報を自分のアプリケーションに入力してもらい、facebookのAPIに問い合わせ、true or falseでログインの可否を返してもらう
他にはクレジット系の課金システム　⇒　GMOのAPI
ユーザー情報の登録や利用、true or falseで返す　など

***
###■　JavaのAPI
JavaもAPIを標準で誰でも便利に使えるクラス（オブジェクト指向のクラスと同じで、呼び出して使える）を大量にまとめている
よく見るJava SE や Java EE は、これらJavaが提供しているAPIをまとめたもの


######※補足：Java SE、Java EEについて
Java SE (Java Platform "Standard" Edition）は"Standard"、つまり基本的なAPIをまとめたもの　Java.lang.Stringクラスはここに入っている
Java EE (Java Platform "Enterprise" Edition)は"Enterprise"（企業）、つまり企業システムなど大規模な開発を行う場合に必要となるAPIをまとめたもの
Java SE + 拡張機能　というイメージ
SE、EEともに定期的にバージョン更新され、新たな機能が追加されていっている（例えば、ラムダ式やStream APIなどはJava 8で追加された新機能）

（参考）
https://www.javadrive.jp/start/install/index5.html
https://www.sejuku.net/blog/12902


######(以下続き)
Eclipseをイメージすると、関連する○○クラスはまとめて○○パッケージに格納されている
APIも同じで、大量に用意したクラスはそれぞれのパッケージに格納されており、よく聞くJava.utilパッケージや、Java.langパッケージがそれにあたる

またこれも同じく、通常作成したクラスは当たり前だがフィールドとメソッドを持っており、APIも同じく各クラスに様々なメソッドを持っている
例えば、文字列の長さを計算する「文字列変数名.length()」はJava.langパッケージのStringクラスが持っているメソッド
因みに配列の要素数を取得する際に使用した「配列名.length」は別物、メソッドではなく配列のフィールド

配列のフィールド…？（未解決）
⇒ 配列はそもそも参照型のデータ型であり、int型などの基本データ型の変数のように各要素1つ1つに値そのものが格納されているわけではない

```Java
int[] n = new int[5];
```
上記のように new することで
1．コンピュータのメモリに int 型の要素を5つもつ配列の領域を確保し
2．さらに配列変数 n の領域がメモリ上に確保され
3．最初の要素の「アドレス」が配列変数に代入される
つまり配列はインスタンスであり、そのフィールドとして length を持っている？




***
###■　APIの利用
APIを実際のプログラムで利用する場合、例えば乱数を発生させるnextInt()メソッドを例に

```Java
public class Main{
    public static void main(String[] args){
        int a = new java.util.Rondom().nextInt(100);
        system.out.println(a + "点です")
```
意味的にはnewでRondomクラスをインスタンス化させて、クラス内のnextIntメソッドを実行している
上記のようにパッケージ名を含めたクラス名を完全修飾名というが、java.utilパッケージのクラスを何度も使用する場合は、毎回の記述が面倒なため、クラス全体でインポート（パッケージ外のクラスを読み込む）する
また、クラス内のメソッドを複数使用する場合はクラスも含めてインポートする

```Java
import java.util.Rondom;
//パッケージすべての場合は
import java.util.*;
```

因みに、system.out.println()もJavaの標準APIで用意されているメソッド（Java.langパッケージのsystemクラス）のため、本来であればJava.langの記述、若しくはインポートが必要だが、Java.langパッケージに関しては使用頻度がかなり高いため、デフォルトでインポートされるようになっている

また参照型として使用している「String」も、Java.langパッケージに含まれるStringクラスで、比較の際に使用するequalsメソッドなどを含んでいる（先述のlengthメソッドも）

（参考）
https://www.internetacademy.jp/it/programming/java/using-java-api-and-class-library.html
https://style.potepan.com/articles/28932.html