Jamstackなサイト制作（Next.js×Sanity）


高炉メーカー→携帯販売員→コーダー→G's ACADEMY TOKYO LAB13→？？？

Hikaru Shiho

# 環境

- Macbook Air 2020
- react 18.0.0
- react-native 0.69.4
- expo 46.0.6
- React Native Debugger 0.13.0
- iPhone12 mini
- ios 15.6

# １．状況

トレーニングマシン予約アプリを作成中、React NativeにてaxiosでAPI（Laravel）からジム一覧データを取得し、一覧表示させている。
動作確認のため、Expo Goアプリを使用し自分のiPhoneでアクセスしたところ、`Nettwork Error` が出ておりAPIからデータが取得できていなかった。
（React Native Debuggerではコンソールでデータが取得できていることは確認済み）

```jsx:Gym.tsx
useEffect(() => {
  getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () => {
  try {
    const { data } = await axios.get(`http://loalhost/api/gym`);
    setGyms(data);
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}
```

アクセスした際に `getGymAll` メソッドが実行され、取得したデータをステートにセットしている。

# ２．エラー内容

```bash
Axios Error : "Nettwork Error"
```

# ３．調査

### axiosの書き方を変えてみる

下記記事を参考にコードを修正してみるも変化なし。

> [https://github.com/axios/axios/issues/3192](https://github.com/axios/axios/issues/3192)


```jsx:Gym.tsx
await axios.get(`http://localhost/api/gym`, {
  headers: {
    'Content-type': 'Application/json',
    'Accept': 'Application/json',
  },
  data: {},
})
```

### LaravelのCORS設定を有効にしてみる

下記記事を参考に設定してみるも変化なし。

> [https://takabus.com/tips/341/#toc2](https://takabus.com/tips/341/#toc2)


# **４．原因**

`http` にリクエストを送っているのが原因のよう。

> [https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed](https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed)


記事の中で **「iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可している」** との記載があった。

> The problem here is that iOS does not allow HTTP requests by default, only HTTPS.
ここで問題となるのは、iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可していることです。


# ５．解決策

`egrok` を使用し、 `https://XXXXXXXX.ngrok.io` アクセスしたら`localhost` にフォワーディングさせるようにした。

- egrokをインストール

> [https://ngrok.com/download](https://ngrok.com/download)

- egrokの設定

> [https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5](https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5)

- egrok起動

```jsx
ngrok http 80
```

起動すると  `Forwording https://XXXXXXXX.ngrok.io -> localhost` と出てくるのでコード内の `http://localhost` の箇所を `https://XXXXXXXX.ngrok.io` に変更する。

```jsx:Gym.tsx
useEffect(() => {
  getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () => {
  try {
    const { data } = await axios.get(`https://XXXXXXXX.ngrok.io/api/gym`);
    setGyms(data);
    console.log(data);
  } catch (error) {
    console.log(error.message);
  }
}
```

データが取得できた。


<h1 data-sourcepos="1:1-1:8">
<a href="#%E7%92%B0%E5%A2%83"></a>環境</h1>
<ul data-sourcepos="3:1-10:0">
<li data-sourcepos="3:1-3:18">Macbook Air 2020</li>
<li data-sourcepos="4:1-4:14">react 18.0.0</li>
<li data-sourcepos="5:1-5:21">react-native 0.69.4</li>
<li data-sourcepos="6:1-6:13">expo 46.0.6</li>
<li data-sourcepos="7:1-7:30">React Native Debugger 0.13.0</li>
<li data-sourcepos="8:1-8:15">iPhone12 mini</li>
<li data-sourcepos="9:1-10:0">ios 15.6</li>
</ul>
<h1 data-sourcepos="11:1-11:14">
<a href="#%EF%BC%91%E7%8A%B6%E6%B3%81"></a>１．状況</h1>
トレーニングマシン予約アプリを作成中、React NativeにてaxiosでAPI（Laravel）からジム一覧データを取得し、一覧表示させている。 
動作確認のため、Expo Goアプリを使用し自分のiPhoneでアクセスしたところ、<code>Nettwork Error</code> が出ておりAPIからデータが取得できていなかった。 
（React Native Debuggerではコンソールでデータが取得できていることは確認済み）
<div class="code-frame" data-lang="jsx" data-sourcepos="17:1-34:3">
<div class="code-lang">Gym.tsx</div>
<div class="highlight"><pre><code>useEffect(() =&gt; {
 getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () =&gt; {
 try {
 const { data } = await axios.get(`http://loalhost/api/gym`);
 setGyms(data);
 console.log(data);
 } catch (error) {
 console.log(error.message);
 }
}
</code></pre></div>
</div>
アクセスした際に <code>getGymAll</code> メソッドが実行され、取得したデータをステートにセットしている。
<h1 data-sourcepos="38:1-38:23">
<a href="#%EF%BC%92%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9"></a>２．エラー内容</h1>
<div class="code-frame" data-lang="bash" data-sourcepos="40:1-42:3"><div class="highlight"><pre><code>Axios Error : "Nettwork Error"
</code></pre></div></div>
<h1 data-sourcepos="44:1-44:14">
<a href="#%EF%BC%93%E8%AA%BF%E6%9F%BB"></a>３．調査</h1>
<h3 data-sourcepos="46:1-46:39">
<a href="#axios%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%82%92%E5%A4%89%E3%81%88%E3%81%A6%E3%81%BF%E3%82%8B"></a>axiosの書き方を変えてみる</h3>
下記記事を参考にコードを修正してみるも変化なし。
<blockquote data-sourcepos="50:1-50:90">
<a href="https://github.com/axios/axios/issues/3192" rel="nofollow noopener" target="_blank">https://github.com/axios/axios/issues/3192</a>
</blockquote>
<div class="code-frame" data-lang="jsx" data-sourcepos="53:1-61:3">
<div class="code-lang">Gym.tsx</div>
<div class="highlight"><pre><code>await axios.get(`http://localhost/api/gym`, {
 headers: {
 'Content-type': 'Application/json',
 'Accept': 'Application/json',
 },
 data: {},
})
</code></pre></div>
</div>
<h3 data-sourcepos="63:1-63:48">
<a href="#laravel%E3%81%AEcors%E8%A8%AD%E5%AE%9A%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B"></a>LaravelのCORS設定を有効にしてみる</h3>
下記記事を参考に設定してみるも変化なし。
<blockquote data-sourcepos="67:1-67:74">
<a href="https://takabus.com/tips/341/#toc2" rel="nofollow noopener" target="_blank">https://takabus.com/tips/341/#toc2</a>
</blockquote>
<h1 data-sourcepos="70:1-70:18">
<a href="#%EF%BC%94%E5%8E%9F%E5%9B%A0"></a>４．原因
</h1>
<code>http</code> にリクエストを送っているのが原因のよう。
<blockquote data-sourcepos="74:1-74:178">
<a href="https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed" rel="nofollow noopener" target="_blank">https://stackoverflow.com/questions/38418998/react-native-fetch-network-request-failed</a>
</blockquote>
記事の中で 「iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可している」 との記載があった。
<blockquote data-sourcepos="79:1-80:147">
The problem here is that iOS does not allow HTTP requests by default, only HTTPS. 
ここで問題となるのは、iOSはデフォルトでHTTPリクエストを許可しておらず、HTTPSのみ許可していることです。
</blockquote>
<h1 data-sourcepos="83:1-83:17">
<a href="#%EF%BC%95%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>５．解決策</h1>
<code>egrok</code> を使用し、 <code>https://XXXXXXXX.ngrok.io</code> アクセスしたら<code>localhost</code> にフォワーディングさせるようにした。
<ul data-sourcepos="87:1-88:0">
<li data-sourcepos="87:1-88:0">egrokをインストール</li>
</ul>
<blockquote data-sourcepos="89:1-89:58">
<a href="https://ngrok.com/download" rel="nofollow noopener" target="_blank">https://ngrok.com/download</a>
</blockquote>
<ul data-sourcepos="91:1-92:0">
<li data-sourcepos="91:1-92:0">egrokの設定</li>
</ul>
<blockquote data-sourcepos="93:1-93:108">
<a href="https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5" id="reference-d63bfcddef08388a49c2">https://qiita.com/miriwo/items/8c1e6550a5ab279d60b5</a>
</blockquote>
<ul data-sourcepos="95:1-96:0">
<li data-sourcepos="95:1-96:0">egrok起動</li>
</ul>
<div class="code-frame" data-lang="jsx" data-sourcepos="97:1-99:3"><div class="highlight"><pre><code>ngrok http 80
</code></pre></div></div>
起動すると <code>Forwording https://XXXXXXXX.ngrok.io -&gt; localhost</code> と出てくるのでコード内の <code>http://localhost</code> の箇所を <code>https://XXXXXXXX.ngrok.io</code> に変更する。
<div class="code-frame" data-lang="jsx" data-sourcepos="103:1-120:3">
<div class="code-lang">Gym.tsx</div>
<div class="highlight"><pre><code>useEffect(() =&gt; {
 getGymAll();
}, []);

/**
 * 登録している全ジムデータを取得
 */
const getGymAll = async () =&gt; {
 try {
 const { data } = await axios.get(`https://XXXXXXXX.ngrok.io/api/gym`);
 setGyms(data);
 console.log(data);
 } catch (error) {
 console.log(error.message);
 }
}
</code></pre></div>
</div>
データが取得できた。

axiosのNettwork ErrorでAPIからデータが取得できない

# 環境

- Macbook Air 2020
- Laravel 9.27.0
- PHP 8.0.23
- sail  v1.15.4
- Composer 2.4.1

# １．状況

LaravelにてAPIを構築しておりGETメソッドでエンドポイント `/reservation/status/{gym_id}/{machine_id}` にアクセスすると、 `ResrvationController.php` 内の `getReservationStatus` メソッドで対象のレコードの数を取得したい。


```php:api.php
Route::prefix('reservation')->group(function () {
    Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
    Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
});
```

```php:ReservationController.php
public function getReservationStatus($gym_id, $machine_id)
{
    $count = Reservation::where([
        ["gym_id", "=", $gym_id],
        ["machine_id", "=", $machine_id],
        ["start_at", "=", null],
        ["is_canceled", "=", 0],
    ])->count();
    return $count;
}
```

# ２．エラー内容

エラーは特に出ていなかったが、数字が返却されず `json` が常に返却される。

```json
{
	"id": 1,
	"gym_id": 2,
	"machine_id": 8,
	"user_id": 3,
	"is_canceled": 0,
	"start_at": null,
	"end_at": null,
	"created_at": "2022-09-07T05:13:27.000000Z",
	"updated_at": "2022-09-07T07:36:44.000000Z"
}
```

# ３．調査

### ルーティングの設定を確認

`sail artisan route:list` コマンドで確認するも、ルーティングは設定されている模様。
![スクリーンショット 2022-09-08 16.24.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/73328720-e3a9-93fb-01dc-ba89eb3c30da.png)
### キャッシュクリア、オートロード

`sail composer dump-autoload` `sail artisan route:clear` `sail artisan config:clear`
 を実行したが変化なし。

### `/status` を `/test` に変更

特に変化なし。 `json` が返却される

### 実行されたメソッド名取得して返却してみる

`ResrvationController.php` のGETメソッド内に `return __FUNCTION__` を記述し意図した関数が実行されているか確認。
↓↓↓
原因判明

# ４．原因

- `getReservationStatus` メソッドを呼び出しているつもりが、エンドポイント `/reservation/{reservation_id}/{gym_id}/{machine_id}` の `nextReservationExists` メソッドが呼び出されていた
- エンドポイント①`/reservation/status/{gym_id}/{machine_id}` とエンドポイント②　`/reservation/{reservation_id}/{gym_id}/{machine_id}` の階層が同じで、 ①にアクセスした場合でも`status` が `{reservation_id}` のところに入ってしまい②にアクセスしている状態になっていた

# ５．解決策

- ルーティングファイルの`/reservation/status/{gym_id}/{machine_id}` と`/reservation/{reservation_id}/{gym_id}/{machine_id}` の記述を逆にした
    
    【変更前】
    
    ```php:api.php
    Route::prefix('reservation')->group(function () {
        Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
        Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
    });
    ```
    
    【変更後】
    
    ```php:api.php
    Route::prefix('reservation')->group(function () {
        Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
        Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
    });
    ```
    
- 数字が返却された
![スクリーンショット 2022-09-09 12.14.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/658499c7-ca2d-8717-5fc3-34f0f2a07dfc.png)


<h1 data-sourcepos="1:1-1:8">
<a href="#%E7%92%B0%E5%A2%83"></a>環境</h1>
<ul data-sourcepos="3:1-8:0">
<li data-sourcepos="3:1-3:18">Macbook Air 2020</li>
<li data-sourcepos="4:1-4:16">Laravel 9.27.0</li>
<li data-sourcepos="5:1-5:12">PHP 8.0.23</li>
<li data-sourcepos="6:1-6:15">sail v1.15.4</li>
<li data-sourcepos="7:1-8:0">Composer 2.4.1</li>
</ul>
<h1 data-sourcepos="9:1-9:14">
<a href="#%EF%BC%91%E7%8A%B6%E6%B3%81"></a>１．状況</h1>
LaravelにてAPIを構築しておりGETメソッドでエンドポイント <code>/reservation/status/{gym_id}/{machine_id}</code> にアクセスすると、 <code>ResrvationController.php</code> 内の <code>getReservationStatus</code> メソッドで対象のレコードの数を取得したい。
<div class="code-frame" data-lang="php" data-sourcepos="14:1-19:3">
<div class="code-lang">api.php</div>
<div class="highlight"><pre><code>Route::prefix('reservation')-&gt;group(function () {
 Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
 Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
});
</code></pre></div>
</div>
<div class="code-frame" data-lang="php" data-sourcepos="21:1-32:3">
<div class="code-lang">ReservationController.php</div>
<div class="highlight"><pre><code>public function getReservationStatus($gym_id, $machine_id)
{
 $count = Reservation::where([
 ["gym_id", "=", $gym_id],
 ["machine_id", "=", $machine_id],
 ["start_at", "=", null],
 ["is_canceled", "=", 0],
 ])-&gt;count();
 return $count;
}
</code></pre></div>
</div>
<h1 data-sourcepos="34:1-34:23">
<a href="#%EF%BC%92%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9"></a>２．エラー内容</h1>
エラーは特に出ていなかったが、数字が返却されず <code>json</code> が常に返却される。
<div class="code-frame" data-lang="json" data-sourcepos="38:1-50:3"><div class="highlight"><pre><code>{
	"id": 1,
	"gym_id": 2,
	"machine_id": 8,
	"user_id": 3,
	"is_canceled": 0,
	"start_at": null,
	"end_at": null,
	"created_at": "2022-09-07T05:13:27.000000Z",
	"updated_at": "2022-09-07T07:36:44.000000Z"
}
</code></pre></div></div>
<h1 data-sourcepos="52:1-52:14">
<a href="#%EF%BC%93%E8%AA%BF%E6%9F%BB"></a>３．調査</h1>
<h3 data-sourcepos="54:1-54:40">
<a href="#%E3%83%AB%E3%83%BC%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0%E3%81%AE%E8%A8%AD%E5%AE%9A%E3%82%92%E7%A2%BA%E8%AA%8D"></a>ルーティングの設定を確認</h3>
<code>sail artisan route:list</code> コマンドで確認するも、ルーティングは設定されている模様。 
<a href="https://camo.qiitausercontent.com/d3848a71ae9a0e94d7420d6e7d12a16afa53fe2e/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323633383537322f37333332383732302d653361392d393366622d303164632d6261383965623363333064612e706e67" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F73328720-e3a9-93fb-01dc-ba89eb3c30da.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=96109a42c568f02b34156f1f0b80f801" alt="スクリーンショット 2022-09-08 16.24.11.png" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/73328720-e3a9-93fb-01dc-ba89eb3c30da.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F73328720-e3a9-93fb-01dc-ba89eb3c30da.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=64a1fc1172aa24466d1c3775891669e2 1x" loading="lazy"></a>
<h3 data-sourcepos="58:1-58:49">
<a href="#%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%82%AF%E3%83%AA%E3%82%A2%E3%82%AA%E3%83%BC%E3%83%88%E3%83%AD%E3%83%BC%E3%83%89"></a>キャッシュクリア、オートロード</h3>
<code>sail composer dump-autoload</code> <code>sail artisan route:clear</code> <code>sail artisan config:clear</code> 
 を実行したが変化なし。
<h3 data-sourcepos="63:1-63:35">
<a href="#status-%E3%82%92-test-%E3%81%AB%E5%A4%89%E6%9B%B4"></a><code>/status</code> を <code>/test</code> に変更</h3>
特に変化なし。 <code>json</code> が返却される
<h3 data-sourcepos="67:1-67:64">
<a href="#%E5%AE%9F%E8%A1%8C%E3%81%95%E3%82%8C%E3%81%9F%E3%83%A1%E3%82%BD%E3%83%83%E3%83%89%E5%90%8D%E5%8F%96%E5%BE%97%E3%81%97%E3%81%A6%E8%BF%94%E5%8D%B4%E3%81%97%E3%81%A6%E3%81%BF%E3%82%8B"></a>実行されたメソッド名取得して返却してみる</h3>
<code>ResrvationController.php</code> のGETメソッド内に <code>return __FUNCTION__</code> を記述し意図した関数が実行されているか確認。 
↓↓↓ 
原因判明
<h1 data-sourcepos="73:1-73:14">
<a href="#%EF%BC%94%E5%8E%9F%E5%9B%A0"></a>４．原因</h1>
<ul data-sourcepos="75:1-77:0">
<li data-sourcepos="75:1-75:219">
<code>getReservationStatus</code> メソッドを呼び出しているつもりが、エンドポイント <code>/reservation/{reservation_id}/{gym_id}/{machine_id}</code> の <code>nextReservationExists</code> メソッドが呼び出されていた</li>
<li data-sourcepos="76:1-77:0">エンドポイント①<code>/reservation/status/{gym_id}/{machine_id}</code> とエンドポイント②　<code>/reservation/{reservation_id}/{gym_id}/{machine_id}</code> の階層が同じで、 ①にアクセスした場合でも<code>status</code> が <code>{reservation_id}</code> のところに入ってしまい②にアクセスしている状態になっていた</li>
</ul>
<h1 data-sourcepos="78:1-78:17">
<a href="#%EF%BC%95%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>５．解決策</h1>
<ul data-sourcepos="80:1-101:164">
<li data-sourcepos="80:1-99:4">
ルーティングファイルの<code>/reservation/status/{gym_id}/{machine_id}</code> と<code>/reservation/{reservation_id}/{gym_id}/{machine_id}</code> の記述を逆にした
【変更前】
<div class="code-frame" data-lang="php" data-sourcepos="84:5-89:7">
<div class="code-lang">api.php</div>
<div class="highlight"><pre><code>Route::prefix('reservation')-&gt;group(function () {
 Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
 Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
});
</code></pre></div>
</div>
【変更後】
<div class="code-frame" data-lang="php" data-sourcepos="93:5-98:7">
<div class="code-lang">api.php</div>
<div class="highlight"><pre><code>Route::prefix('reservation')-&gt;group(function () {
 Route::get('/status/{gym_id}/{machine_id}', [ReservationController::class, 'getReservationStatus']);
 Route::get('/{reservation_id}/{gym_id}/{machine_id}', [ReservationController::class, 'nextReservationExists']);
});
</code></pre></div>
</div>
</li>
<li data-sourcepos="100:1-101:164">
数字が返却された 
<a href="https://camo.qiitausercontent.com/7d1879c823d4fcfc7e60318006133899dfc58185/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323633383537322f36353834393963372d636132642d383731372d356663332d3334663066326130376466632e706e67" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F658499c7-ca2d-8717-5fc3-34f0f2a07dfc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=74ff9ecfc5b60c83ca5a2c7e2b3f7c14" alt="スクリーンショット 2022-09-09 12.14.54.png" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/658499c7-ca2d-8717-5fc3-34f0f2a07dfc.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F658499c7-ca2d-8717-5fc3-34f0f2a07dfc.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=8d6089bcc867d3c9ebc67e1b22c4c317 1x" loading="lazy"></a>
</li>
</ul>

【Laravel】Controllerメソッドの戻り値が意図した値で返却されない

# 環境

- Macbook Air 2020

```jsx
"expo": "~46.0.9",
"firebase": "^9.9.3",
"react": "18.0.0",
"react-native": "0.69.4",
```

# １．状況

ExpoでFirebaseをReact Nativeプロジェクトにインストール後、 ユーザー登録処理を実装した際にエラーが出る。

```jsx:firebaseConfig.tsx
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
 apiKey: "xxxxxxxxxxxx",
 authDomain: "xxxxxxxxxxxx",
 projectId: "xxxxxxxxxxxx",
 storageBucket: "xxxxxxxxxxxx",
 messagingSenderId: "xxxxxxxxxxxx",
 appId: "xxxxxxxxxxxx"
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
```

```jsx:RegisterScreen.tsx
import { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button, KeyboardAvoidingView } from 'react-native';
import _Button from '../../components/Button';
import { createUserWithEmailAndPassword } from '@firebase/auth';
import { auth } from '../../firebase/config';

const RegisterScreen = ({ navigation }) => {
 const [email, setEmail] = useState('');
 const [password, setPassword] = useState('');

 const handleRegister = async () => {
 try {
 const user = await createUserWithEmailAndPassword(auth, email, password);
 console.log(user);
 } catch (error) {
 console.log(error.message);
 }
 }

 return (
 <KeyboardAvoidingView
 style={styles.container}
 behavior="padding"
 >
 <Text style={styles.titleText}>新規登録</Text>
 <TextInput
 style={styles.input}
 textAlign={"left"}
 selectionColor={"#00f"}
 placeholder={"メールアドレス"}
 autoCapitalize="none"
 onChangeText={setEmail}
 value={email}
 />
 <TextInput
 style={styles.input}
 textAlign={"left"}
 selectionColor={"#00f"}
 placeholder={"パスワード"}
 autoCapitalize="none"
 secureTextEntry={true}
 onChangeText={setPassword}
 value={password}
 />
 <View style={{ paddingTop: 32 }}>
 <_Button
 onPress={handleRegister}
 title={"新規登録"}
 bgColor={"#010440"}
 color={"#fff"}
 />
 </View>
 <View style={styles.transitionBtn}>
 <Button
 onPress={() => navigation.navigate("LogIn")}
 title="ログイン"
 color={"#010440"}
 />
 </View>
 </KeyboardAvoidingView>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: "center",
 backgroundColor: '#BFF205',
 padding: 40,
 },
 transitionBtn: {
 fontWeight: "bold",
 position: "absolute",
 top: 20,
 right: 20,
 },
 titleText: {
 fontSize: 20,
 fontWeight: "bold",
 textAlign: "center",
 paddingBottom: 8,
 },
 input: {
 backgroundColor: '#fff',
 padding: 12,
 borderRadius: 8,
 fontSize: 18,
 marginTop: 20,
 },
});

export default RegisterScreen;
```

# ２．エラー内容

```bash
While trying to resolve module `idb` from file `/mobile-app/node_modules/@firebase/app/dist/esm/index.esm2017.js`, the package `/mobile-app/node_modules/idb/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/mobile-app/node_modules/idb/build/index.cjs`. Indeed, none of these files exist:
```

- **日本語訳**
ファイル `/mobile-app/node_modules/@firebase/app/dist/esm/index.esm2017.js` からモジュール `idb` を解決しようとしているとき、パッケージ `/mobile-app/node_modules/idb/package.json` は正常に見つかりました。しかし、このパッケージ自体が解決できなかった `main` モジュールのフィールドを指定しています (`/mobile-app/node_modules/idb/build/index.cjs`確かに、これらのファイルは一つも存在しません。

# ３．調査

以下のワードでググる

- expo firebase.Indeed, none of these files exist:

# ４．原因

- `.cjs`は、デフォルトで expo、react native でサポートされていないファイル拡張子

# ５．解決策

- プロジェクトフォルダ直下に `metro.config.js` を作成し、下記内容を追記

```jsx:metro.config.js
const { getDefaultConfig } = require("@expo/metro-config");

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push("cjs");

module.exports = defaultConfig;
```

- `expo start` でシミュレーターを起動

# ６．参考資料

- [React-native bundling failure. ERROR MESSAGE: "While trying to resolve module 'idb'..... Indeed none of these files exist":](https://stackoverflow.com/questions/72179070/react-native-bundling-failure-error-message-while-trying-to-resolve-module-i)

【React Native】Firebaseインストール後に *.cjs. Indeed, none of these files exist

# 環境

- Macbook Air 2020
- react 18.0.0
- react-native 0.69.4
- expo 46.0.6
- React Native Debugger 0.13.0

# １．状況

React Navigatorをインストール後、下記ファイルを編集し `expo start -c` を実行したが、シミュレーターが起動せずエラーが発生。

```jsx:App.js
import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";

const Stack = createStackNavigator();

export default function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}
```

```jsx:HomeScreen.js
import React, { useEffect, useState } from "react";
import { StyleSheet, View, FlatList, SafeAreaView } from "react-native";
import ListItem from "../conponents/ListItem";
import Constants from "expo-constants";
import axios from "axios";

const URL = `https://newsapi.org/v2/top-headlines?country=jp&category=business&apiKey=${Constants.manifest.extra.newsApiKey}`;

export default function HomeScreen() {
 const [articles, setArticles] = useState([]);

 useEffect(() => {
 getNewsData();
 }, []);

 const getNewsData = async () => {
 try {
 const response = await axios.get(URL);
 setArticles(response.data.articles);
 } catch (error) {
 console.log(error);
 }
 };

 return (
 <SafeAreaView style={styles.safeAreaView}>
 <View style={styles.container}>
 <FlatList
 data={articles}
 renderItem={({ item }) => (
 <ListItem
 author={item.author}
 image={item.urlToImage}
 title={item.title}
 />
 )}
 />
 </View>
 </SafeAreaView>
 );
}

const styles = StyleSheet.create({
 safeAreaView: {
 flex: 1,
 backgroundColor: "#1e90ff",
 },
 container: {
 flex: 1,
 backgroundColor: "#fff",
 justifyContent: "center",
 },
});
```

# ２．エラー内容

```bash
React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from
```

- **日本語訳**
React Native エラー: エクスポートの名前空間は、最初に `@babel/plugin-proposal-export-namespace-from で変換する必要があります

# ３．調査

以下のワードでググる

- Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from

# **４．原因**

- Reanimated 2.9.0 以降は`'react-native-reanimated/plugin'` というBabelプラグインをplugins配列に追加する必要があった

# **５．解決策**

- `react-native-reanimated` をインストール

```bash
npm install react-native-reanimated
```

- `babel.config.js` ファイルを編集

```jsx:babel.config.js
module.exports = function (api) {
 api.cache(true);
 return {
 presets: ["babel-preset-expo"],
 plugins: ["react-native-reanimated/plugin"], //追加
 };
};
```

- `expo start -c` を実行するも解消されず
- `node_modules` フォルダを削除し、 `npm install` で再インストール
- React Native Debuggerを再インストール

```bash
//アンインストール
brew uninstall --cask react-native-debugger

//再インストール
brew reinstall --cask react-native-debugger
```

- シミュレーターが表示された

# **６．参考資料**

- [React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from](https://stackoverflow.com/questions/73046330/react-native-error-export-namespace-should-be-first-transformed-by-babel-plug)
- [[Solved] エクスポート名前空間は、最初に@ babel/plugin-proposal-export-namespace-fromによって変換される必要があります](https://ezerror.com/ja/solved-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E3%81%AF%E3%80%81%E6%9C%80%E5%88%9D%E3%81%AB-babel-plugin-proposal-export-namespace-from%E3%81%AB)
- [Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from` #3364](https://github.com/software-mansion/react-native-reanimated/issues/3364)
- [Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from` on `export * as default from './Animated';` 
#3410](https://github.com/software-mansion/react-native-reanimated/issues/3410)
- [初めてのHomebrew Cask (+主要コマンド一覧表)](https://qiita.com/chocomint_t/items/fa4ef7c9169eaef7e0f6#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEhomebrew-cask)

<h1 data-sourcepos="1:1-1:8">
<a href="#%E7%92%B0%E5%A2%83"></a>環境</h1>
<ul data-sourcepos="3:1-8:0">
<li data-sourcepos="3:1-3:18">Macbook Air 2020</li>
<li data-sourcepos="4:1-4:14">react 18.0.0</li>
<li data-sourcepos="5:1-5:21">react-native 0.69.4</li>
<li data-sourcepos="6:1-6:13">expo 46.0.6</li>
<li data-sourcepos="7:1-8:0">React Native Debugger 0.13.0</li>
</ul>
<h1 data-sourcepos="9:1-9:14">
<a href="#%EF%BC%91%E7%8A%B6%E6%B3%81"></a>１．状況</h1>
React Navigatorをインストール後、下記ファイルを編集し <code>expo start -c</code> を実行したが、シミュレーターが起動せずエラーが発生。
<div class="code-frame" data-lang="jsx" data-sourcepos="13:1-30:3">
<div class="code-lang">App.js</div>
<div class="highlight"><pre><code>import React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";

const Stack = createStackNavigator();

export default function App() {
 return (
 &lt;NavigationContainer&gt;
 &lt;Stack.Navigator&gt;
 &lt;Stack.Screen name="Home" component={HomeScreen} /&gt;
 &lt;/Stack.Navigator&gt;
 &lt;/NavigationContainer&gt;
 );
}
</code></pre></div>
</div>
<div class="code-frame" data-lang="jsx" data-sourcepos="32:1-86:3">
<div class="code-lang">HomeScreen.js</div>
<div class="highlight"><pre><code>import React, { useEffect, useState } from "react";
import { StyleSheet, View, FlatList, SafeAreaView } from "react-native";
import ListItem from "../conponents/ListItem";
import Constants from "expo-constants";
import axios from "axios";

const URL = `https://newsapi.org/v2/top-headlines?country=jp&amp;category=business&amp;apiKey=${Constants.manifest.extra.newsApiKey}`;

export default function HomeScreen() {
 const [articles, setArticles] = useState([]);

 useEffect(() =&gt; {
 getNewsData();
 }, []);

 const getNewsData = async () =&gt; {
 try {
 const response = await axios.get(URL);
 setArticles(response.data.articles);
 } catch (error) {
 console.log(error);
 }
 };

 return (
 &lt;SafeAreaView style={styles.safeAreaView}&gt;
 &lt;View style={styles.container}&gt;
 &lt;FlatList
 data={articles}
 renderItem={({ item }) =&gt; (
 &lt;ListItem
 author={item.author}
 image={item.urlToImage}
 title={item.title}
 /&gt;
 )}
 /&gt;
 &lt;/View&gt;
 &lt;/SafeAreaView&gt;
 );
}

const styles = StyleSheet.create({
 safeAreaView: {
 flex: 1,
 backgroundColor: "#1e90ff",
 },
 container: {
 flex: 1,
 backgroundColor: "#fff",
 justifyContent: "center",
 },
});
</code></pre></div>
</div>
<h1 data-sourcepos="88:1-88:23">
<a href="#%EF%BC%92%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9"></a>２．エラー内容</h1>
<div class="code-frame" data-lang="bash" data-sourcepos="90:1-92:3"><div class="highlight"><pre><code>React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from
</code></pre></div></div>
<ul data-sourcepos="94:1-96:0">
<li data-sourcepos="94:1-96:0">
日本語訳 
React Native エラー: エクスポートの名前空間は、最初に `@babel/plugin-proposal-export-namespace-from で変換する必要があります</li>
</ul>
<h1 data-sourcepos="97:1-97:14">
<a href="#%EF%BC%93%E8%AA%BF%E6%9F%BB"></a>３．調査</h1>
以下のワードでググる
<ul data-sourcepos="101:1-102:0">
<li data-sourcepos="101:1-102:0">Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from</li>
</ul>
<h1 data-sourcepos="103:1-103:18">
<a href="#%EF%BC%94%E5%8E%9F%E5%9B%A0"></a>４．原因
</h1>
<ul data-sourcepos="105:1-106:0">
<li data-sourcepos="105:1-106:0">Reanimated 2.9.0 以降は<code>'react-native-reanimated/plugin'</code> というBabelプラグインをplugins配列に追加する必要があった</li>
</ul>
<h1 data-sourcepos="107:1-107:21">
<a href="#%EF%BC%95%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>５．解決策
</h1>
<ul data-sourcepos="109:1-110:0">
<li data-sourcepos="109:1-110:0">
<code>react-native-reanimated</code> をインストール</li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="111:1-113:3"><div class="highlight"><pre><code>npm install react-native-reanimated
</code></pre></div></div>
<ul data-sourcepos="115:1-116:0">
<li data-sourcepos="115:1-116:0">
<code>babel.config.js</code> ファイルを編集</li>
</ul>
<div class="code-frame" data-lang="jsx" data-sourcepos="117:1-125:3">
<div class="code-lang">babel.config.js</div>
<div class="highlight"><pre><code>module.exports = function (api) {
 api.cache(true);
 return {
 presets: ["babel-preset-expo"],
 plugins: ["react-native-reanimated/plugin"], //追加
 };
};
</code></pre></div>
</div>
<ul data-sourcepos="127:1-130:0">
<li data-sourcepos="127:1-127:51">
<code>expo start -c</code> を実行するも解消されず</li>
<li data-sourcepos="128:1-128:83">
<code>node_modules</code> フォルダを削除し、 <code>npm install</code> で再インストール</li>
<li data-sourcepos="129:1-130:0">React Native Debuggerを再インストール</li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="131:1-137:3"><div class="highlight"><pre><code>//アンインストール
brew uninstall --cask react-native-debugger

//再インストール
brew reinstall --cask react-native-debugger
</code></pre></div></div>
<ul data-sourcepos="139:1-140:0">
<li data-sourcepos="139:1-140:0">シミュレーターが表示された</li>
</ul>
<h1 data-sourcepos="141:1-141:24">
<a href="#%EF%BC%96%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99"></a>６．参考資料
</h1>
<ul data-sourcepos="143:1-148:168">
<li data-sourcepos="143:1-143:241"><a href="https://stackoverflow.com/questions/73046330/react-native-error-export-namespace-should-be-first-transformed-by-babel-plug" rel="nofollow noopener" target="_blank">React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from</a></li>
<li data-sourcepos="144:1-144:371"><a href="https://ezerror.com/ja/solved-%E3%82%A8%E3%82%AF%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%88%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E3%81%AF%E3%80%81%E6%9C%80%E5%88%9D%E3%81%AB-babel-plugin-proposal-export-namespace-from%E3%81%AB" rel="nofollow noopener" target="_blank">[Solved] エクスポート名前空間は、最初に@ babel/plugin-proposal-export-namespace-fromによって変換される必要があります</a></li>
<li data-sourcepos="145:1-145:179"><a href="https://github.com/software-mansion/react-native-reanimated/issues/3364" rel="nofollow noopener" target="_blank">Export namespace should be first transformed by <code>@babel/plugin-proposal-export-namespace-from</code> #3364</a></li>
<li data-sourcepos="146:1-147:79"><a href="https://github.com/software-mansion/react-native-reanimated/issues/3410" rel="nofollow noopener" target="_blank">Export namespace should be first transformed by <code>@babel/plugin-proposal-export-namespace-from</code> on <code>export * as default from './Animated';</code>  
#3410</a></li>
<li data-sourcepos="148:1-148:168"><a href="https://qiita.com/chocomint_t/items/fa4ef7c9169eaef7e0f6#%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEhomebrew-cask" id="reference-6fa23fceddd1b1e7fc2c">初めてのHomebrew Cask (+主要コマンド一覧表)</a></li>
</ul>

【React Native】ReactNavigatorをインストール後、シミュレーターが起動しない

# １．実現したいこと

React（バージョン18）にて、Material-UIをインストールしたい。
ターミナルにて下記コマンドを実行した。

```bash
npm install --save @material-ui/core @material-ui/icons @material-ui/system
```


# ２．エラー内容

コマンド実行後、下記エラーが出る。

```zsh
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-chat@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR!   @testing-library/react@"^13.3.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/shiho/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/shiho/.npm/_logs/2022-06-25T03_43_26_604Z-debug-0.log
```

# **３．調査**


以下のワードでググる

- react18 material-ui

# ４．原因

material-uiがReactバージョンの18に対応していない模様。

> [MUI installation doesn't work with React 18 - Stack Overflow](https://stackoverflow.com/questions/71713111/mui-installation-doesnt-work-with-react-18)

# **５．解決策**

Reactのバージョンを18→17に変更し、Material-UIを再インストール。

>[How to create a new project based on react@17](https://stackoverflow.com/questions/72220065/how-to-create-a-new-project-based-on-react17)

- `package.json`のバージョンを修正

```json:package.json
{
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
}
```

- `@testing-library/`を削除

```json:package.json
{
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
}
```

- `package-lock.json`と`node_modules`を削除
![スクリーンショット 2022-06-25 13.24.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/8146598f-49d8-b1b5-4050-c3bb637aac11.png)

- 下記コマンドを実行

```bash
npm install
```

# ６．参考資料

- [MUI installation doesn't work with React 18 - Stack Overflow](https://stackoverflow.com/questions/71713111/mui-installation-doesnt-work-with-react-18)
- [How to create a new project based on react@17](https://stackoverflow.com/questions/72220065/how-to-create-a-new-project-based-on-react17)


<h1 data-sourcepos="1:1-1:29">
<a href="#%EF%BC%91%E5%AE%9F%E7%8F%BE%E3%81%97%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8"></a>１．実現したいこと</h1>
React（バージョン18）にて、Material-UIをインストールしたい。 
ターミナルにて下記コマンドを実行した。
<div class="code-frame" data-lang="bash" data-sourcepos="6:1-8:3"><div class="highlight"><pre><code>npm install --save @material-ui/core @material-ui/icons @material-ui/system
</code></pre></div></div>
<h1 data-sourcepos="11:1-11:23">
<a href="#%EF%BC%92%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9"></a>２．エラー内容</h1>
コマンド実行後、下記エラーが出る。
<div class="code-frame" data-lang="bash" data-sourcepos="15:1-37:3"><div class="highlight"><pre><code>npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: react-chat@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR! react@"^17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.0.0" from @testing-library/react@13.3.0
npm ERR! node_modules/@testing-library/react
npm ERR! @testing-library/react@"^13.3.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/shiho/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/shiho/.npm/_logs/2022-06-25T03_43_26_604Z-debug-0.log
</code></pre></div></div>
<h1 data-sourcepos="39:1-39:18">
<a href="#%EF%BC%93%E8%AA%BF%E6%9F%BB"></a>３．調査
</h1>
以下のワードでググる
<ul data-sourcepos="44:1-45:0">
<li data-sourcepos="44:1-45:0">react18 material-ui</li>
</ul>
<h1 data-sourcepos="46:1-46:14">
<a href="#%EF%BC%94%E5%8E%9F%E5%9B%A0"></a>４．原因</h1>
material-uiがReactバージョンの18に対応していない模様。
<blockquote data-sourcepos="50:1-50:153">
<a href="https://stackoverflow.com/questions/71713111/mui-installation-doesnt-work-with-react-18" rel="nofollow noopener" target="_blank">MUI installation doesn't work with React 18 - Stack Overflow</a>
</blockquote>
<h1 data-sourcepos="52:1-52:21">
<a href="#%EF%BC%95%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>５．解決策
</h1>
Reactのバージョンを18→17に変更し、Material-UIを再インストール。
<blockquote data-sourcepos="56:1-56:139">
<a href="https://stackoverflow.com/questions/72220065/how-to-create-a-new-project-based-on-react17" rel="nofollow noopener" target="_blank">How to create a new project based on react@17</a>
</blockquote>
<ul data-sourcepos="58:1-59:0">
<li data-sourcepos="58:1-59:0">
<code>package.json</code>のバージョンを修正</li>
</ul>
<div class="code-frame" data-lang="json" data-sourcepos="60:1-65:3">
<div class="code-lang">package.json</div>
<div class="highlight"><pre><code>{
 "react": "^17.0.2",
 "react-dom": "^17.0.2",
}
</code></pre></div>
</div>
<ul data-sourcepos="67:1-68:0">
<li data-sourcepos="67:1-68:0">
<code>@testing-library/</code>を削除</li>
</ul>
<div class="code-frame" data-lang="json" data-sourcepos="69:1-75:3">
<div class="code-lang">package.json</div>
<div class="highlight"><pre><code>{
 "@testing-library/jest-dom": "^5.16.4",
 "@testing-library/react": "^13.2.0",
 "@testing-library/user-event": "^13.5.0",
}
</code></pre></div>
</div>
<ul data-sourcepos="77:1-81:0">
<li data-sourcepos="77:1-79:0">
<code>package-lock.json</code>と<code>node_modules</code>を削除 
<a href="https://camo.qiitausercontent.com/3c2d1c6d477c002ab98e2d4314042d17c1159148/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323633383537322f38313436353938662d343964382d623162352d343035302d6333626236333761616331312e706e67" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F8146598f-49d8-b1b5-4050-c3bb637aac11.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=2e1a7c0ced82493722181cd7e83f4e41" alt="スクリーンショット 2022-06-25 13.24.53.png" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/8146598f-49d8-b1b5-4050-c3bb637aac11.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F2638572%2F8146598f-49d8-b1b5-4050-c3bb637aac11.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=9a2e4478eab3039ebbe42b9443ebca3d 1x" loading="lazy"></a>
</li>
<li data-sourcepos="80:1-81:0">
下記コマンドを実行
</li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="82:1-84:3"><div class="highlight"><pre><code>npm install
</code></pre></div></div>
<h1 data-sourcepos="86:1-86:20">
<a href="#%EF%BC%96%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99"></a>６．参考資料</h1>
<ul data-sourcepos="88:1-89:140">
<li data-sourcepos="88:1-88:153"><a href="https://stackoverflow.com/questions/71713111/mui-installation-doesnt-work-with-react-18" rel="nofollow noopener" target="_blank">MUI installation doesn't work with React 18 - Stack Overflow</a></li>
<li data-sourcepos="89:1-89:140"><a href="https://stackoverflow.com/questions/72220065/how-to-create-a-new-project-based-on-react17" rel="nofollow noopener" target="_blank">How to create a new project based on react@17</a></li>
</ul>

【React】Material-UIがインストールできない

# 概要

DBに登録されているスケジュールを全件取得し一覧表示。一覧表示されているスケジュールに対し、`<input>`で入力したキーワードでスケジュールのタイトル、作成者に該当する スケジュールを表示し、該当しないスケジュールは非表示にする。
また、文字が入力されるたびに検索処理が走り、部分一致検索にてキーワードに該当するスケジュールを表示する。

# 完成イメージ
![画面収録-2022-06-10-13.05.40.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/611dfaff-67ea-92cd-9e48-ab976c2a57b1.gif)


# コード

```html:index.html
//検索バー

	<input type="text" id="serch_schedule" placeholder="キーワードで検索">


//検索対象のスケジュール
<ul id="display_schedule_area">
	<li class="schedule" data-title="スケジュール１" data-author="田中さん">
		<a href="#">
			<dl>
				<dt>6/6 19:40 〜 6/6 19:41田中さん</dt>
				<dd>スケジュール１</dd>
			</dl>
		</a>
	</li>
	<li class="schedule" data-title="スケジュール2" data-author="川島さん">
		<a href="#">
			<dl>
				<dt>6/6 19:40 〜 6/6 19:41川島さん</dt>
				<dd>スケジュール2</dd>
			</dl>
		</a>
	</li>
	<li class="schedule" data-title="スケジュール３" data-author="西村さん">
		<a href="#">
			<dl>
				<dt>6/6 19:40 〜 6/6 19:41田中さん</dt>
				<dd>スケジュール３</dd>
			</dl>
		</a>
	</li>
 //検索結果が0件の時に表示
	<li class="no_schedule" data-title="" data-author="">検索したスケジュールは見つかりませんでした</li>
</ul>
```

```jsx:main.js

document.getElementById("serch_schedule").addEventListener("input", searchSchedule);

const searchSchedule = (e) => {
	const keyword = e.target.value;
	const $schedules = document.querySelectorAll("#display_schedule_area > li");
	const $no_schedule = document.querySelector(".no_schedule");
	$no_schedule.style.display = "none";
	if (keyword) {
		$schedules.forEach(e => e.style.display = "none");
		const filter = Array.from($schedules).filter(e => {
			const schedule_title = e.dataset.title;
			const schedule_author = e.dataset.author;
			if (schedule_title.indexOf(keyword.toLowerCase()) !== -1 ||
				schedule_title.indexOf(keyword.toUpperCase()) !== -1 ||
				schedule_author.indexOf(keyword.toLowerCase()) !== -1 ||
				schedule_author.indexOf(keyword.toUpperCase()) !== -1) {
				return e;
			}
		});
		filter.length === 0 ? $no_schedule.style.display = "block" : filter.forEach(e => e.style.display = "block");
	} else {
		$schedules.forEach(e => e.style.display = "block");
		$no_schedule.style.display = "none";
	}
}
```

# 解説

```jsx:main.js
document.getElementById("serch_schedule").addEventListener("input", searchSchedule);
```

- 検索バーに文字が1文字入力されるたびに `searchSchedule` メソッドが実行される。

```jsx:main.js
const keyword = e.target.value;
const $schedules = document.querySelectorAll("#display_schedule_area > li");
const $no_schedule = document.querySelector(".no_schedule");
$no_schedule.style.display = "none";
```

- 入力したキーワード、検索対象の `<li>` 要素、検索結果が0件だった場合に表示する `<li>` 要素を変数に格納。
- `$no_schedule` は非表示にしておく。
- アロー関数において入力されたキーワード（ `<input>`タグの `value`）は `this` の参照先が**windowオブジェクトを参照**するため `this.value` では取得できない

> [https://codelikes.com/javascript-arrow-function/](https://codelikes.com/javascript-arrow-function/)

```jsx:main.js
$schedules.forEach(e => e.style.display = "none");
```

- キーワードが入力されれば一旦検索対象の `<li>` 要素は非表示にする（初期化）

```jsx:main.js
const filter = Array.from($schedules).filter(e => {
			const schedule_title = e.dataset.title;
			const schedule_author = e.dataset.author;
			if (schedule_title.indexOf(keyword.toLowerCase()) !== -1 ||
				schedule_title.indexOf(keyword.toUpperCase()) !== -1 ||
				schedule_author.indexOf(keyword.toLowerCase()) !== -1 ||
				schedule_author.indexOf(keyword.toUpperCase()) !== -1) {
				return e;
});
```

- NodeListの `$schedules`に対して `filter` メソッドを実行するとエラーになるので、`Array.from($schedules)` で配列に変換後、`filter` メソッドを実行。
- `indexOf` メソッドで条件に合致する `<li>` 要素を変数 `filter` に格納し、新たに配列を作成する。
- `toUpperCase` メソッドと `toLowerCase` メソッドで大文字、小文字どちらでもヒットするようになる。

> [Array.from()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from)

```jsx:main.js
filter.length === 0 ? $no_schedule.style.display = "block" : filter.forEach(e => e.style.display = "block");
```

- 配列 `filter` が空でない場合は `forEach` メソッドで順番に表示する。
- 配列が空の場合は0件用の `<li>` 要素を表示する。

# 参考

- [【JavaScript】配列系メソッドあれこれ](https://qiita.com/shiho97797/items/a3ed8596f9f98c064e7e)
- [HTML CollectionとNodeListの違い【JavaScript】](https://code-r-dev.com/html-collection-vs-nodelist/)

【JavaScript】キーワード検索でリアルタイムにコンテンツ表示させる

# **配列に値を追加**

## 末尾に追加（push）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.push('追加した要素');
console.log(array);

//【出力】
//[1, 2, 3, 4, 5, 6, '追加した要素']
```

## 先頭に追加（unshift）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.unshift("追加した要素");
console.log(array);

//【出力】
//['追加した要素', 1, 2, 3, 4, 5, 6]
```

# **配列の値を削除**

## 末尾を削除（pop）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.pop();
console.log(array);

//【出力】
//[1, 2, 3, 4, 5]
```

## 先頭を削除（shift）

```jsx
const array = [1, 2, 3, 4, 5, 6];
array.shift();
console.log(array);

//【出力】
//[2, 3, 4, 5, 6]
```

# **配列内部を検索**

## 検索して**最初にマッチしたデータを取り出す（find）**

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.find(v => {
	return v % 2 === 0;
});

//【出力】
//2
```

`find`メソッドは `true`を返すと検索が止まり、要素が見つからなければ `undefined`を返す。

> [Array.prototype.find()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/find) 

## 検索してマッチしたデータで配列を作成（filter）

下記コードは `array` のインデックスが `2` より大きいものを抽出し、新たな配列を作成する。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	return index > 2;
});
console.log(new_array);

//【出力】
//['奈良', '和歌山']
```

`filter` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
const new_array = array.filter(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
```

> [Array.prototype.filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)

## ある条件の要素が存在するかどうか判定（some）

指定された条件に、配列内の要素が `１つでも当てはまるか`どうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.some(function(item){
	return item === 2;
});
console.log(reslut);

//【出力】
//true
```

- 配列の要素が1つでも条件を満たしていれば`true`を返し、そうでなければ`false`を返す
- 引数`item`には配列の値が渡ってくる

> [Array.prototype.some()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

## ある条件の要素が存在するかどうか判定（every）

指定された条件に、配列内の要素が `全ての要素が当てはまるか`どうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 2;
});
console.log(reslut);

//【出力】
//false

const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.every(function(item){
	return item >= 1;
});
console.log(reslut);

//【出力】
//true
```

- 配列要素の全てが条件を満たしていれば`true`を返し、そうでなければ`false`を返す

> [Array.prototype.every()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)

## ある条件の要素が含まれているかどうか判定（****includes****）

特定の要素が配列に含まれているかどうかを判定。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let reslut = array.includes(5);
console.log(reslut);

//【出力】
//true
```

- 1つでも要素が含まれていれば`true`を返し、そうでなければ`false`を返す

> [Array.prototype.includes()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)

# 配列を順番に処理

## **配列を順番に処理（forEach）**

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let sum = 0;
array.forEach(function (v) {
	sum += v;
	console.log(sum);
});

//【出力】
//1
//3
//6
//10
//15
//21
//28
//36
```

`forEach` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = ["大阪", "兵庫", "京都", "奈良", "和歌山"];
array.forEach(function (value, index, list) {
	console.log(value, index, list);
});

//【出力】
//大阪 0 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//兵庫 1 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//京都 2 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//奈良 3 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
//和歌山 4 (5) ['大阪', '兵庫', '京都', '奈良', '和歌山']
```

> Array.prototype.forEach()


# **配列を作成**

## 処理行った要素で新しい配列を作成（map）

`map`メソッドは、`forEach`メソッドに似ているが、それぞれの要素になにかしらの処理をした値で再度、新しい配列を得ることができる。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
let new_array = array.map(function(v){
	return v * 2;
});
console.log(new_array);

//【出力】
//[2, 4, 6, 8, 10, 12, 14, 16]
```

`map` メソッドの各引数には

- 第一引数： `value` は配列の値
- 第二引数： `index`は配列のインデックス番号
- 第三引数： `list`は現在処理している配列

が渡ってくる。

```jsx
const array = [1, 2, 3, 4, 5, 6, 7, 8];
array.map(function(value, index, list){
	console.log(value, index, list);
});

//【出力】
//0 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//1 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//2 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//3 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//4 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//5 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//6 (8) [1, 2, 3, 4, 5, 6, 7, 8]
//7 (8) [1, 2, 3, 4, 5, 6, 7, 8]
```

# reduce()

```jsx
const array = [1, 2, 3, 4];
const result = array.reduce(function (accumulator, currentValue, currentIndex, array) {
    return accumulator + currentValue;
});

//【出力】
//10
```

- 第三引数`currentIndex`と第四引数、`array`は省略可能

## 処理の流れ

| 関数実行回数 | accumulator | currentValue | currentIndex |
| --- | --- | --- | --- |
| 1回目 | 1 | 2 | 1 |
| 2回目 | 3 | 3 | 2 |
| 3回目 | 6 | 4 | 3 |
- 初めは `accumulator` に `array` の0番目である `1` 、`currentValue` に`array` の1番目である `2` が入る
- `1 + 2` の結果である `3` が2回目の第一引数 `accumulator` に渡る
- 2回目は第一引数`accumulator` に 1回目の `1 + 2` の計算結果である `3` が入り、第二引数`currentValue`には `array` の2番目である `3` が入る
- `3 + 3` の結果である `6`が3回目の第一引数 `accumulator` に渡る
- 3回目は第一引数`accumulator` に 2回目の `3 + 3` の計算結果である `6` が入り、第二引数`currentValue`には `array` の3番目である `4` が入る
- `accumulator` の `6` と`currentValue`の `4` を足して出力は `10` となる

> [Array.prototype.reduce()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)


【JavaScript】配列系メソッドあれこれ

# 初期設定

**ユーザー名を設定**

```bash
git config --global user.name "Githubのユーザー名"
```

**メールアドレスを設定**

```bash
git config --global user.email "メールアドレス"
```

**エディタを登録**

```bash
git config --global core.editor "エディタ名"
```

- vscodeの場合： `code --wait`
- atomの場合： `atom --wait`

****コマンドラインの色の設定****

```bash
git config --global color.ui auto
```

- git statusなどをした時の、Untracked file, staged fileなどの表示色がわかりやすくする

## 設定確認

**設定を一覧で確認**

```bash
git config --list
```

# ローカルリポジトリ

## ローカルリポジトリ作成

```bash
git init
```

## ステージに追加

**変更分全て追加**

```bash
git add .
```

**指定したファイルを追加**

```bash
git add <ファイル名>
```

**指定したフォルダを追加**

```bash
git add <ディレクトリ名>
```

## ステージに追加（git add）した変更を取り消す

**ステージに追加した変更を取り消す**

```bash
git reset HEAD <ファイル名>
git reset HEAD <ディレクトリ名>
```

**ステージに追加した全ての変更を取り消す**

```bash
git reset HEAD .
```

## ローカルリポジトリに追加

**メッセージ付きで追加**

```bash
git commit -m "<コメント>"
```

**変更内容を確認して追加**

```bash
git commit -v
```

- コミットする前に変更内容を再度確認したいときに使用

# リモートリポジトリ（GitHub）

## リモートリポジトリを登録

**originという名前でリモートリポジトリを登録する**

```bash
git remote add origin <リモートリポジトリURL>
```

- 次回以降リモートリポジトリURLを入力しなくても良くなる

## リモートリポジトリへ送信

**指定したブランチでリモートリポジトリへ送信する**

```bash
git push -u origin <ブランチ名> 
```

- `-u`オプションは次回以降リモートにプッシュする際に `git push` で送信できるようなる。

## リモートリポジトリから取得する

**リモートリポジトリをクローンする**

```bash
git clone <リモートリポジトリURL> 
```

**リモートリポジトリの内容をローカルリポジトリに取得する**

```bash
git fetch <リモートリポジトリURL> 
git fetch origin 
```

- ※ローカルのディレクトリではなくローカルリポジトリに取り込む

**込んだ内容をローカルのディレクトリに取り込む**

```bash
git merge <リモートリポジトリURL> 
git merge origin
```

### fetchとmergeを一括で行う（git pull）

**指定したリモートブランチをローカルブランチに取り込む**

```bash
git pull origin <リモートブランチ名>
git pull origin master
```

### pullの注意点

- 自分がdevelopブランチにいる場合に `git pull origin master` を実行してしまうと、developブランチにmasterブランチの内容が取り込まれてしまう
- なのでファイルがぐちゃぐちゃになる可能性がある
- 基本的には `fetch` → `maerge` を使用する方が安全
- `git pull` を使う際は挙動を理解して使用するのがベター

## ファイル削除

**リモートリポジトリファイルのみ削除**

```bash
git rm --cached <ファイル名>
```

**ローカルとリモートリポジトリファイルの削除**

```bash
git rm <ファイル名>
```

# ブランチ

## ブランチを作成

**任意のブランチを作成（切り替えは行わない）**

```bash
git branch <ブランチ名>
```

**任意のブランチを作成し切り替え**

```bash
git checkout -b <ブランチ名>
```

## ブランチを切り替え

**指定したブランチに切り替え**

```bash
git checkout <ブランチ名>
```

**任意のブランチを作成し切り替え**

```bash
git checkout -b <ブランチ名>
```

## ブランチを変更

**自分が作業しているブランチの名前を変更**

```bash
git branch -m <新しいブランチ名>
```

## ブランチを削除

**ブランチを削除**

```bash
git branch -d <ブランチ名>
```

- master以外のブランチがmasterにマージされていない場合は削除できない

**強制削除**

```bash
git branch -D <ブランチ名>
```

## ブランチ一覧を表示

**ローカルブランチのみ表示**

```bash
git branch
```

**リモート追跡ブランチを含む全てのブランチを表示**

```bash
git branch -a
```

# ****現在の状態****確認

下記いずれかの条件を満たすファイルがあれば、一覧で表示するコマンド

- `git add` されているけどまだ `git commit` されていないファイルの一覧
- 編集・変更・削除されているが、まだ `git add` されていないファイルの一覧
- Git管理されていない、かつ `.gitignore` で管理除外対象にもされていないものの一覧

```bash
git status
```

# ログを確認

```bash
git log --oneline
```

# 参考

- [Git（公式ドキュメント）](https://git-scm.com/docs/git-status)
- [Git コマンドリファレンス（日本語版）](https://tracpath.com/docs/)

<h1 data-sourcepos="3:1-3:14">
<a href="#%E5%88%9D%E6%9C%9F%E8%A8%AD%E5%AE%9A"></a>初期設定</h1>
ユーザー名を設定
<div class="code-frame" data-lang="bash" data-sourcepos="7:1-9:3"><div class="highlight"><pre><code>git config --global user.name "Githubのユーザー名"
</code></pre></div></div>
メールアドレスを設定
<div class="code-frame" data-lang="bash" data-sourcepos="13:1-15:3"><div class="highlight"><pre><code>git config --global user.email "メールアドレス"
</code></pre></div></div>
エディタを登録
<div class="code-frame" data-lang="bash" data-sourcepos="19:1-21:3"><div class="highlight"><pre><code>git config --global core.editor "エディタ名"
</code></pre></div></div>
<ul data-sourcepos="23:1-25:0">
<li data-sourcepos="23:1-23:34">vscodeの場合： <code>code --wait</code>
</li>
<li data-sourcepos="24:1-25:0">atomの場合： <code>atom --wait</code>
</li>
</ul>
コマンドラインの色の設定
<div class="code-frame" data-lang="bash" data-sourcepos="28:1-30:3"><div class="highlight"><pre><code>git config --global color.ui auto
</code></pre></div></div>
<ul data-sourcepos="32:1-33:0">
<li data-sourcepos="32:1-33:0">git statusなどをした時の、Untracked file, staged fileなどの表示色がわかりやすくする</li>
</ul>
<h2 data-sourcepos="34:1-34:15">
<a href="#%E8%A8%AD%E5%AE%9A%E7%A2%BA%E8%AA%8D"></a>設定確認</h2>
設定を一覧で確認
<div class="code-frame" data-lang="bash" data-sourcepos="38:1-40:3"><div class="highlight"><pre><code>git config --list
</code></pre></div></div>
<h1 data-sourcepos="42:1-42:29">
<a href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA"></a>ローカルリポジトリ</h1>
<h2 data-sourcepos="44:1-44:36">
<a href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E4%BD%9C%E6%88%90"></a>ローカルリポジトリ作成</h2>
<div class="code-frame" data-lang="bash" data-sourcepos="46:1-48:3"><div class="highlight"><pre><code>git init
</code></pre></div></div>
<h2 data-sourcepos="50:1-50:24">
<a href="#%E3%82%B9%E3%83%86%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0"></a>ステージに追加</h2>
変更分全て追加
<div class="code-frame" data-lang="bash" data-sourcepos="54:1-56:3"><div class="highlight"><pre><code>git add .
</code></pre></div></div>
指定したファイルを追加
<div class="code-frame" data-lang="bash" data-sourcepos="60:1-62:3"><div class="highlight"><pre><code>git add &lt;ファイル名&gt;
</code></pre></div></div>
指定したフォルダを追加
<div class="code-frame" data-lang="bash" data-sourcepos="66:1-68:3"><div class="highlight"><pre><code>git add &lt;ディレクトリ名&gt;
</code></pre></div></div>
<h2 data-sourcepos="70:1-70:64">
<a href="#%E3%82%B9%E3%83%86%E3%83%BC%E3%82%B8%E3%81%AB%E8%BF%BD%E5%8A%A0git-add%E3%81%97%E3%81%9F%E5%A4%89%E6%9B%B4%E3%82%92%E5%8F%96%E3%82%8A%E6%B6%88%E3%81%99"></a>ステージに追加（git add）した変更を取り消す</h2>
ステージに追加した変更を取り消す
<div class="code-frame" data-lang="bash" data-sourcepos="74:1-77:3"><div class="highlight"><pre><code>git reset HEAD &lt;ファイル名&gt;
git reset HEAD &lt;ディレクトリ名&gt;
</code></pre></div></div>
ステージに追加した全ての変更を取り消す
<div class="code-frame" data-lang="bash" data-sourcepos="81:1-83:3"><div class="highlight"><pre><code>git reset HEAD .
</code></pre></div></div>
<h2 data-sourcepos="85:1-85:39">
<a href="#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AB%E8%BF%BD%E5%8A%A0"></a>ローカルリポジトリに追加</h2>
メッセージ付きで追加
<div class="code-frame" data-lang="bash" data-sourcepos="89:1-91:3"><div class="highlight"><pre><code>git commit -m "&lt;コメント&gt;"
</code></pre></div></div>
変更内容を確認して追加
<div class="code-frame" data-lang="bash" data-sourcepos="95:1-97:3"><div class="highlight"><pre><code>git commit -v
</code></pre></div></div>
<ul data-sourcepos="99:1-100:0">
<li data-sourcepos="99:1-100:0">コミットする前に変更内容を再度確認したいときに使用</li>
</ul>
<h1 data-sourcepos="101:1-101:41">
<a href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AAgithub"></a>リモートリポジトリ（GitHub）</h1>
<h2 data-sourcepos="103:1-103:39">
<a href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%82%92%E7%99%BB%E9%8C%B2"></a>リモートリポジトリを登録</h2>
originという名前でリモートリポジトリを登録する
<div class="code-frame" data-lang="bash" data-sourcepos="107:1-109:3"><div class="highlight"><pre><code>git remote add origin &lt;リモートリポジトリURL&gt;
</code></pre></div></div>
<ul data-sourcepos="111:1-112:0">
<li data-sourcepos="111:1-112:0">次回以降リモートリポジトリURLを入力しなくても良くなる</li>
</ul>
<h2 data-sourcepos="113:1-113:39">
<a href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%B8%E9%80%81%E4%BF%A1"></a>リモートリポジトリへ送信</h2>
指定したブランチでリモートリポジトリへ送信する
<div class="code-frame" data-lang="bash" data-sourcepos="117:1-119:3"><div class="highlight"><pre><code>git push -u origin &lt;ブランチ名&gt; 
</code></pre></div></div>
<ul data-sourcepos="121:1-122:0">
<li data-sourcepos="121:1-122:0">
<code>-u</code>オプションは次回以降リモートにプッシュする際に <code>git push</code> で送信できるようなる。</li>
</ul>
<h2 data-sourcepos="123:1-123:48">
<a href="#%E3%83%AA%E3%83%A2%E3%83%BC%E3%83%88%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%8B%E3%82%89%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B"></a>リモートリポジトリから取得する</h2>
リモートリポジトリをクローンする
<div class="code-frame" data-lang="bash" data-sourcepos="127:1-129:3"><div class="highlight"><pre><code>git clone &lt;リモートリポジトリURL&gt; 
</code></pre></div></div>
リモートリポジトリの内容をローカルリポジトリに取得する
<div class="code-frame" data-lang="bash" data-sourcepos="133:1-136:3"><div class="highlight"><pre><code>git fetch &lt;リモートリポジトリURL&gt; 
git fetch origin 
</code></pre></div></div>
<ul data-sourcepos="138:1-139:0">
<li data-sourcepos="138:1-139:0">※ローカルのディレクトリではなくローカルリポジトリに取り込む</li>
</ul>
込んだ内容をローカルのディレクトリに取り込む
<div class="code-frame" data-lang="bash" data-sourcepos="142:1-145:3"><div class="highlight"><pre><code>git merge &lt;リモートリポジトリURL&gt; 
git merge origin
</code></pre></div></div>
<h3 data-sourcepos="147:1-147:49">
<a href="#fetch%E3%81%A8merge%E3%82%92%E4%B8%80%E6%8B%AC%E3%81%A7%E8%A1%8C%E3%81%86git-pull"></a>fetchとmergeを一括で行う（git pull）</h3>
指定したリモートブランチをローカルブランチに取り込む
<div class="code-frame" data-lang="bash" data-sourcepos="151:1-154:3"><div class="highlight"><pre><code>git pull origin &lt;リモートブランチ名&gt;
git pull origin master
</code></pre></div></div>
<h3 data-sourcepos="156:1-156:20">
<a href="#pull%E3%81%AE%E6%B3%A8%E6%84%8F%E7%82%B9"></a>pullの注意点</h3>
<ul data-sourcepos="158:1-162:0">
<li data-sourcepos="158:1-158:183">自分がdevelopブランチにいる場合に <code>git pull origin master</code> を実行してしまうと、developブランチにmasterブランチの内容が取り込まれてしまう</li>
<li data-sourcepos="159:1-159:71">なのでファイルがぐちゃぐちゃになる可能性がある</li>
<li data-sourcepos="160:1-160:66">基本的には <code>fetch</code> → <code>maerge</code> を使用する方が安全</li>
<li data-sourcepos="161:1-162:0">
<code>git pull</code> を使う際は挙動を理解して使用するのがベター</li>
</ul>
<h2 data-sourcepos="163:1-163:21">
<a href="#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%89%8A%E9%99%A4"></a>ファイル削除</h2>
リモートリポジトリファイルのみ削除
<div class="code-frame" data-lang="bash" data-sourcepos="167:1-169:3"><div class="highlight"><pre><code>git rm --cached &lt;ファイル名&gt;
</code></pre></div></div>
ローカルとリモートリポジトリファイルの削除
<div class="code-frame" data-lang="bash" data-sourcepos="173:1-175:3"><div class="highlight"><pre><code>git rm &lt;ファイル名&gt;
</code></pre></div></div>
<h1 data-sourcepos="177:1-177:14">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81"></a>ブランチ</h1>
<h2 data-sourcepos="179:1-179:24">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E4%BD%9C%E6%88%90"></a>ブランチを作成</h2>
任意のブランチを作成（切り替えは行わない）
<div class="code-frame" data-lang="bash" data-sourcepos="183:1-185:3"><div class="highlight"><pre><code>git branch &lt;ブランチ名&gt;
</code></pre></div></div>
任意のブランチを作成し切り替え
<div class="code-frame" data-lang="bash" data-sourcepos="189:1-191:3"><div class="highlight"><pre><code>git checkout -b &lt;ブランチ名&gt;
</code></pre></div></div>
<h2 data-sourcepos="193:1-193:30">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88"></a>ブランチを切り替え</h2>
指定したブランチに切り替え
<div class="code-frame" data-lang="bash" data-sourcepos="197:1-199:3"><div class="highlight"><pre><code>git checkout &lt;ブランチ名&gt;
</code></pre></div></div>
任意のブランチを作成し切り替え
<div class="code-frame" data-lang="bash" data-sourcepos="203:1-205:3"><div class="highlight"><pre><code>git checkout -b &lt;ブランチ名&gt;
</code></pre></div></div>
<h2 data-sourcepos="207:1-207:24">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E5%A4%89%E6%9B%B4"></a>ブランチを変更</h2>
自分が作業しているブランチの名前を変更
<div class="code-frame" data-lang="bash" data-sourcepos="211:1-213:3"><div class="highlight"><pre><code>git branch -m &lt;新しいブランチ名&gt;
</code></pre></div></div>
<h2 data-sourcepos="215:1-215:24">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E3%82%92%E5%89%8A%E9%99%A4"></a>ブランチを削除</h2>
ブランチを削除
<div class="code-frame" data-lang="bash" data-sourcepos="219:1-221:3"><div class="highlight"><pre><code>git branch -d &lt;ブランチ名&gt;
</code></pre></div></div>
<ul data-sourcepos="223:1-224:0">
<li data-sourcepos="223:1-224:0">master以外のブランチがmasterにマージされていない場合は削除できない</li>
</ul>
強制削除
<div class="code-frame" data-lang="bash" data-sourcepos="227:1-229:3"><div class="highlight"><pre><code>git branch -D &lt;ブランチ名&gt;
</code></pre></div></div>
<h2 data-sourcepos="231:1-231:30">
<a href="#%E3%83%96%E3%83%A9%E3%83%B3%E3%83%81%E4%B8%80%E8%A6%A7%E3%82%92%E8%A1%A8%E7%A4%BA"></a>ブランチ一覧を表示</h2>
ローカルブランチのみ表示
<div class="code-frame" data-lang="bash" data-sourcepos="235:1-237:3"><div class="highlight"><pre><code>git branch
</code></pre></div></div>
リモート追跡ブランチを含む全てのブランチを表示
<div class="code-frame" data-lang="bash" data-sourcepos="241:1-243:3"><div class="highlight"><pre><code>git branch -a
</code></pre></div></div>
<h1 data-sourcepos="245:1-245:31">
<a href="#%E7%8F%BE%E5%9C%A8%E3%81%AE%E7%8A%B6%E6%85%8B%E7%A2%BA%E8%AA%8D"></a>現在の状態確認</h1>
下記いずれかの条件を満たすファイルがあれば、一覧で表示するコマンド
<ul data-sourcepos="249:1-252:0">
<li data-sourcepos="249:1-249:95">
<code>git add</code> されているけどまだ <code>git commit</code> されていないファイルの一覧</li>
<li data-sourcepos="250:1-250:105">編集・変更・削除されているが、まだ <code>git add</code> されていないファイルの一覧</li>
<li data-sourcepos="251:1-252:0">Git管理されていない、かつ <code>.gitignore</code> で管理除外対象にもされていないものの一覧</li>
</ul>
<div class="code-frame" data-lang="bash" data-sourcepos="253:1-255:3"><div class="highlight"><pre><code>git status
</code></pre></div></div>
<h1 data-sourcepos="257:1-257:17">
<a href="#%E3%83%AD%E3%82%B0%E3%82%92%E7%A2%BA%E8%AA%8D"></a>ログを確認</h1>
<div class="code-frame" data-lang="bash" data-sourcepos="259:1-261:3"><div class="highlight"><pre><code>git log --oneline
</code></pre></div></div>
<h1 data-sourcepos="263:1-263:8">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h1>
<ul data-sourcepos="265:1-266:84">
<li data-sourcepos="265:1-265:74"><a href="https://git-scm.com/docs/git-status" rel="nofollow noopener" target="_blank">Git（公式ドキュメント）</a></li>
<li data-sourcepos="266:1-266:84"><a href="https://tracpath.com/docs/" rel="nofollow noopener" target="_blank">Git コマンドリファレンス（日本語版）</a></li>
</ul>

Gitコマンドあれこれ

# Dateオブジェクト作成

まずはDateオブジェクトの作成から。

## 現在時刻で作成

```jsx
new Date();
```

## 年月日時分秒の値を渡して作成

```jsx
console.log(new Date(2015));
// Thu Jan 01 1970 09:00:02 GMT+0900

console.log(new Date(2015, 0));
// Thu Jan 01 2015 00:00:00 GMT+0900

console.log(new Date(2015, 15));
// Fri Apr 01 2016 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20));
// Tue Jan 20 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 40));
// Mon Feb 09 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 14));
// Tue Jan 20 2015 14:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 25));
// Wed Jan 21 2015 01:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30));
// Tue Jan 20 2015 09:30:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 75));
// Tue Jan 20 2015 10:15:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, 45));
// Tue Jan 20 2015 09:30:45 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, 85));
// Tue Jan 20 2015 09:31:25 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, -30));
// Tue Jan 20 2015 09:31:25 GMT+0900
```

## 文字列を渡して作成

`<input type="date">` や `<input type="time">` で選択した値を元にDateオブジェクトを作成するときに使用。

```jsx
console.log(new Date('2000-04-01T18:39:00'));
// Sat Apr 01 2000 18:39:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01'));
// Sat Apr 01 2000 09:00:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01 10:00'));
// Sat Apr 01 2000 10:00:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01 05:43:21'));
// Sat Apr 01 2000 05:43:21 GMT+0900 (日本標準時)

console.log(new Date('2000/05/01 06:20:00'));
// Mon May 01 2000 06:20:00 GMT+0900 (日本標準時)

console.log(new Date('July 1, 2000 07:15:30'));
// Sat Jul 01 2000 07:15:30 GMT+0900 (日本標準時)

console.log(new Date('8 3, 1995 08:05:20'));
// Thu Aug 03 1995 08:05:20 GMT+0900 (日本標準時)

console.log(new Date('09 08, 1994 09:00:00'));
// Thu Sep 08 1994 09:00:00 GMT+0900 (日本標準時)
```

# 変換（Timestamp ⇄ Dateオブジェクト）

## Timestampとは

- 「1970年1月1日午前0時0分0秒（UTC）」からの経過秒数で表現したもの
- 「1970年1月1日午前0時0分1秒」だったら「1」のように、UTCで「1970年1月1日午前0時0分0秒」を基準にして、そこからの経過秒数で日時を表現するやり方

## UTCとは

- Coordinated Universal Time
- 日本時間から9時間引いた時間（協定世界時）
- UTCに**9時間足したのが日本時間**

## UnixTime → Dateオブジェクト

「1567566215」のような数字から、「2022/01/01」の形に変換。
UnixTimeは秒単位であり、Dateオブジェクトに変換するにはミリ秒になおす必要があるため、 `timestamp * 1000` が必要。

```jsx
//UnixTimestamp = 1648758600 で検証
let date = new Date(timestamp * 1000);

console.log(date.getFullYear()); //2022
console.log(date.toLocaleDateString().slice(5)); //4/1
console.log(date.toLocaleTimeString().slice(0, -3)); //5:30
```

## Dateオブジェクト → UnixTime

2022/01/01のような形から、「1567566215」の形に変換。
Dateオブジェクトはミリ秒単位であり、UnixTimeに変換するには秒単位になおす必要があるため、 `timestamp / 1000` が必要。

```jsx
let date = new Date();
let timestamp = Math.floor( date.getTime() / 1000 );

console.log(timestamp); //1651585200
```

# 参考

- [指定した日時のDateインスタンスを作る](https://gray-code.com/javascript/make-a-date-instance-with-specified-time/)
- [UNIX時間との相互変換](https://so-zou.jp/web-app/tech/programming/javascript/grammar/object/date.htm#no9)

<h1 data-sourcepos="1:1-1:30">
<a href="#date%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90"></a>Dateオブジェクト作成</h1>
まずはDateオブジェクトの作成から。
<h2 data-sourcepos="5:1-5:24">
<a href="#%E7%8F%BE%E5%9C%A8%E6%99%82%E5%88%BB%E3%81%A7%E4%BD%9C%E6%88%90"></a>現在時刻で作成</h2>
<div class="code-frame" data-lang="jsx" data-sourcepos="7:1-9:3"><div class="highlight"><pre><code>new Date();
</code></pre></div></div>
<h2 data-sourcepos="11:1-11:45">
<a href="#%E5%B9%B4%E6%9C%88%E6%97%A5%E6%99%82%E5%88%86%E7%A7%92%E3%81%AE%E5%80%A4%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E4%BD%9C%E6%88%90"></a>年月日時分秒の値を渡して作成</h2>
<div class="code-frame" data-lang="jsx" data-sourcepos="13:1-49:3"><div class="highlight"><pre><code>console.log(new Date(2015));
// Thu Jan 01 1970 09:00:02 GMT+0900

console.log(new Date(2015, 0));
// Thu Jan 01 2015 00:00:00 GMT+0900

console.log(new Date(2015, 15));
// Fri Apr 01 2016 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20));
// Tue Jan 20 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 40));
// Mon Feb 09 2015 00:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 14));
// Tue Jan 20 2015 14:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 25));
// Wed Jan 21 2015 01:00:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30));
// Tue Jan 20 2015 09:30:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 75));
// Tue Jan 20 2015 10:15:00 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, 45));
// Tue Jan 20 2015 09:30:45 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, 85));
// Tue Jan 20 2015 09:31:25 GMT+0900

console.log(new Date(2015, 0, 20, 9, 30, -30));
// Tue Jan 20 2015 09:31:25 GMT+0900
</code></pre></div></div>
<h2 data-sourcepos="51:1-51:30">
<a href="#%E6%96%87%E5%AD%97%E5%88%97%E3%82%92%E6%B8%A1%E3%81%97%E3%81%A6%E4%BD%9C%E6%88%90"></a>文字列を渡して作成</h2>
<code>&lt;input type="date"&gt;</code> や <code>&lt;input type="time"&gt;</code> で選択した値を元にDateオブジェクトを作成するときに使用。
<div class="code-frame" data-lang="jsx" data-sourcepos="55:1-79:3"><div class="highlight"><pre><code>console.log(new Date('2000-04-01T18:39:00'));
// Sat Apr 01 2000 18:39:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01'));
// Sat Apr 01 2000 09:00:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01 10:00'));
// Sat Apr 01 2000 10:00:00 GMT+0900 (日本標準時)

console.log(new Date('2000-04-01 05:43:21'));
// Sat Apr 01 2000 05:43:21 GMT+0900 (日本標準時)

console.log(new Date('2000/05/01 06:20:00'));
// Mon May 01 2000 06:20:00 GMT+0900 (日本標準時)

console.log(new Date('July 1, 2000 07:15:30'));
// Sat Jul 01 2000 07:15:30 GMT+0900 (日本標準時)

console.log(new Date('8 3, 1995 08:05:20'));
// Thu Aug 03 1995 08:05:20 GMT+0900 (日本標準時)

console.log(new Date('09 08, 1994 09:00:00'));
// Thu Sep 08 1994 09:00:00 GMT+0900 (日本標準時)
</code></pre></div></div>
<h1 data-sourcepos="81:1-81:50">
<a href="#%E5%A4%89%E6%8F%9Btimestamp--date%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88"></a>変換（Timestamp ⇄ Dateオブジェクト）</h1>
<h2 data-sourcepos="83:1-83:18">
<a href="#timestamp%E3%81%A8%E3%81%AF"></a>Timestampとは</h2>
<ul data-sourcepos="85:1-87:0">
<li data-sourcepos="85:1-85:92">「1970年1月1日午前0時0分0秒（UTC）」からの経過秒数で表現したもの</li>
<li data-sourcepos="86:1-87:0">「1970年1月1日午前0時0分1秒」だったら「1」のように、UTCで「1970年1月1日午前0時0分0秒」を基準にして、そこからの経過秒数で日時を表現するやり方</li>
</ul>
<h2 data-sourcepos="88:1-88:12">
<a href="#utc%E3%81%A8%E3%81%AF"></a>UTCとは</h2>
<ul data-sourcepos="90:1-93:0">
<li data-sourcepos="90:1-90:28">Coordinated Universal Time</li>
<li data-sourcepos="91:1-91:63">日本時間から9時間引いた時間（協定世界時）</li>
<li data-sourcepos="92:1-93:0">UTCに9時間足したのが日本時間
</li>
</ul>
<h2 data-sourcepos="94:1-94:38">
<a href="#unixtime--date%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88"></a>UnixTime → Dateオブジェクト</h2>
「1567566215」のような数字から、「2022/01/01」の形に変換。 
UnixTimeは秒単位であり、Dateオブジェクトに変換するにはミリ秒になおす必要があるため、 <code>timestamp * 1000</code> が必要。
<div class="code-frame" data-lang="jsx" data-sourcepos="99:1-106:3"><div class="highlight"><pre><code>//UnixTimestamp = 1648758600 で検証
let date = new Date(timestamp * 1000);

console.log(date.getFullYear()); //2022
console.log(date.toLocaleDateString().slice(5)); //4/1
console.log(date.toLocaleTimeString().slice(0, -3)); //5:30
</code></pre></div></div>
<h2 data-sourcepos="108:1-108:38">
<a href="#date%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88--unixtime"></a>Dateオブジェクト → UnixTime</h2>
2022/01/01のような形から、「1567566215」の形に変換。 
Dateオブジェクトはミリ秒単位であり、UnixTimeに変換するには秒単位になおす必要があるため、 <code>timestamp / 1000</code> が必要。
<div class="code-frame" data-lang="jsx" data-sourcepos="113:1-118:3"><div class="highlight"><pre><code>let date = new Date();
let timestamp = Math.floor( date.getTime() / 1000 );

console.log(timestamp); //1651585200
</code></pre></div></div>
<h1 data-sourcepos="120:1-120:8">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h1>
<ul data-sourcepos="122:1-123:115">
<li data-sourcepos="122:1-122:132"><a href="https://gray-code.com/javascript/make-a-date-instance-with-specified-time/" rel="nofollow noopener" target="_blank">指定した日時のDateインスタンスを作る</a></li>
<li data-sourcepos="123:1-123:115"><a href="https://so-zou.jp/web-app/tech/programming/javascript/grammar/object/date.htm#no9" rel="nofollow noopener" target="_blank">UNIX時間との相互変換</a></li>
</ul>

【Javascript】時間の取り扱い（Timestamp ⇄ Dateオブジェクト）

# 前提

- Firebase JavaScript SDK version9を使用
- chrome（バージョン: 101.0.4951.54）

# 準備

## SDK をインポート、初期化

- SDK（Software Development Kit）とは
ソフトウェアを開発するためのあれこれが詰め込まれたキット（一式）

> [SDKとは](https://wa3.i-3-i.info/word13150.html)
> 

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
//使用するメソッドをインポート
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

//Realtime Database管理画面に表示された値を入力
const firebaseConfig = {
 apiKey: "XXXXXXXXXXXXXXXXXX",
 authDomain: "XXXXXXXXXXXXXXXXXX",
 projectId: "XXXXXXXXXXXXXXXXXX",
 storageBucket: "XXXXXXXXXXXXXXXXXX",
 messagingSenderId: "XXXXXXXXXXXXXXXXXX",
 appId: "XXXXXXXXXXXXXXXXXX",
};

//初期化
const app = initializeApp(firebaseConfig);
//データベースサービスへの参照を取得
const db = getDatabase(app);
```

> [【バージョン9】利用可能なFirebaseJSSDK（公式）](https://firebase.google.com/docs/web/learn-more?hl=ja#available-libraries)


# データの保存

## set

指定したパスに書き込みを行う。
既存データで`username` と `email` の2つのkeyがあった場合、再度 `username` に新たな値を保存しようとすると `email` が消えてしまう。
特定のkeyのみ任意のデータを保存したい場合は `update` を使用する。

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const auth = getAuth();
set(ref(db, 'users/' + "ユーザーID"), {
 username: "任意の値",
 email: "任意の値",
});
```

# データの更新

## update

特定のkeyのみ任意のデータを保存を保存する。

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, set } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

const auth = getAuth();

// chat/users/ユーザーIDのnameを更新する
update(ref(db, "chat/users/" + auth.currentUser.uid), {
			name: "任意の値",
});
```
# データの削除

## remove

- 特定のディレクトリごと削除する

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //削除したいデータのパスを指定

document.getElementById("delete").addEventListener("click", function () {
		remove(dbref);
});
```

- 特定のデータのみ削除したい場合
削除したいデータのユニークキーを末尾に入れる。

```jsx
//削除したいデータのユニークキーを指定
const dbref = ref(db, "chat/www/-N1tBd7XQJeUgymBbrbq");
```

# データリストの操作

データベースの階層は下記のディレクトリとする。

```bash
chat
 └ www
 ┝ -N1tBd7XQJeUgymBbrbq
 │ └ text:"AAA"
 ┝ -N1wM58eG8pztMDv7gFJ
 │ └ text:"BBB"
 └ -N1tBd7XQJeUgymBbrbq
 └ text:"CCC"
```

> [ウェブ上でデータリストを操作する（公式）](https://firebase.google.com/docs/database/web/lists-of-data?hl=ja)

## 書き込み

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //データを書き込むパスを指定

document.getElementById("submit").addEventListener("click", function () {
	//登録するデータを定義
 const data = {
 text: document.getElementById("text").value
 };
 const newPostRef = push(dbref); //ユニークキーを生成
 set(newPostRef, data); //書き込み
});
```

【結果】
`key` が `text` 、 `value` は `"取得した値"` で保存される。

```bash
chat
 └ www
 └ -N1tBd7XQJeUgymBbrbq
 └ text:"取得した値"
```

## データ操作を監視する

### onChildAdded

指定されたパスに保存しているデータの数の分だけトリガーされる。
さらに、指定されたパスに新しいデータが追加されると、そのたびに再度トリガーされ、引数のsnapshotに取り出したデータの個数分のオブジェクトが入る。
データの個数分イベントが発生しているのでループ処理をしなくても1個ずつconsoleに出力できる。

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //取得したいデータのパスを指定

onChildAdded(dbref, function (snapshot) {
	let data = snapshot.val();
	console.log(data);
});

// console
{text: 'AAA'}
{text: 'BBB'}
{text: 'CCC'}
```

- 取得したデータを取り出す場合

```jsx
onChildAdded(dbref, function (snapshot) {
	let data = snapshot.val();
	//keyを取り出す
	console.log(snapshot.key);
	//valueを取り出す
	console.log(data.text);
});

// console
-N1tBd7XQJeUgymBbrbq
AAA
-N1wM58eG8pztMDv7gFJ
BBB
-N1tBd7XQJeUgymBbrbq
CCC
```

### onChildRemoved

`onChildAdded` の逆バーション。
指定されたパス直下のデータが削除されるとトリガーされる。
引数のsnapshotには、削除されたデータのオブジェクトが入る。

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

//chat/www/内の text: 'AAA' を削除
document.getElementById("delete").addEventListener("click", function () {
	// chat/www/内の text: 'AAA' のユニークキーを指定
	remove(ref(db, "chat/messages/-N1tBd7XQJeUgymBbrbq"));
});

//削除ボタンが押されるとsnapshotに削除されたデータが入ってくる
onChildRemoved(ref(db, "chat/messages"), function(snapshot){
	console.log(snapshot.key);
	console.log(snapshot.val());
});

//console
-N1tBd7XQJeUgymBbrbq
{text: 'AAA'}
```

### onValue

指定されたパスに新しいデータが追加されるまたはデータが削除されると、そのたびにトリガーされ、オブジェクト（スナップショット）をリストとして取得できる。

```jsx
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
import { getDatabase, ref, push, set, onChildAdded, remove, onChildRemoved, onValue } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

const firebaseConfig = {}
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const dbref = ref(db, "chat/www"); //取得したいデータのパスを指定

onValue(dbref, function(snapshots){
		console.log(snapshots);
});

//console
オブジェクト（DataSnapshot）が入った配列
```

- 取得したデータを取り出す場合
取得したデータを取り出すにはループ処理が必要。

```jsx
onValue(dbref, function(snapshots){
	snapshots.forEach(function(snapshot){
		let data = snapshot.val();
		console.log(snapshot.key); //keyを取り出す
		console.log(data.text); //valueを取り出す
	});
});

//console
-N1tBd7XQJeUgymBbrbq
AAA
-N1wM58eG8pztMDv7gFJ
BBB
-N1tBd7XQJeUgymBbrbq
CCC
```

## データを並びかえる

データベースの階層は下記のディレクトリとする。

```bash
chat
 └ www
 ┝ -N1tBd7XQJeUgymBbrbq
 │ └ create_at: 1653225899020
 ┝ -N1wM58eG8pztMDv7gFJ
 │ └ create_at: 1653225897020
 └ -N1tBd7XQJeUgymBbrbq
 └ create_at: 1653225898020
```

### orderByChild

`www` 直下にあるデータを `create_at` のUnixTime順で取得し、`getChat` 関数を実行。

```jsx
onValue(query(ref(db, "chat/www"), orderByChild("create_at")), getChat);
```

> [データを並べ替える（公式）](https://firebase.google.com/docs/database/web/lists-of-data?hl=ja#sort_data)

## データのフィルタリング

### limitToFirst

`www` 直下にあるデータの１番目から2件のみ取得し、`getChat` 関数を実行。

```jsx
onValue(query(ref(db, "chat/www"), limitToFirst(2)), getChat);
```

### 任意のキーワードに該当するデータを表示

`<input type="text" id="search_keyword">` で文字が入力される度にイベントを発火させ、入力した文字列で`calender/schedules` 直下に保存されているスケジュールのタイトルから該当するものを取得。入力したキーワードにて前方一致検索を行う。

```html
<input type="text" id="search">
```


```jsx
document.getElementById("serch").addEventListener("input", addSchedule);

const searchSchedule = function () {
	const keyword = document.getElementById("search_keyword").value;
	get(query(ref(db, "calender/schedules"), orderByChild("title"), startAt(keyword), endAt(keyword + '\uf8ff')))
		.then(function (snapshots) {
			//成功した時の処理
		}).catch(function (e) {
			//成功した時の処理
		});
}
```


> [データのフィルタリング（公式）](https://firebase.google.com/docs/database/web/lists-of-data?hl=ja#filtering_data)

# 最後に

何か間違っている箇所がありましたら、ご指摘くださると幸いです。

# 参考

- [Fetch/Get All Data from Firebase Realtime DB (Version 9) in TABLE using JavaScript（Youtube）](https://www.youtube.com/watch?v=KnAsYNhI_CY)
- [Getting Started with the Firebase Realtime Database on the Web - Firebase Fundamentals（Firebase公式YouTube）](https://www.youtube.com/watch?v=pP7quzFmWBY)
- [【Firebase】Authentication（version 9）の使い方](https://qiita.com/shiho97797/items/22cbda84274bfecde98f)
- [Firebase Realtime Databaseのクエリの書き方(JavaScript version9対応)](https://qiita.com/GrowUp-Haruno/items/f956f424c9a6e5fd3480)

【Firebase】Realtime Database（version 9）データ操作あれこれ

# 前提

- [Firebase JavaScript SDK version9](https://firebase.google.com/docs/database/web/start?hl=ja)を使用
- メールアドレス、パスワードでの認証
- [Firebaseが用意しているUI](https://firebase.google.com/docs/auth/web/firebaseui?hl=ja)は使用せず独自のフォームを作成
- chrome（バージョン: 101.0.4951.54）

# 準備

1. [Firebase管理画面](https://console.firebase.google.com/project/gsdemo-95f59/authentication/providers)にアクセス
2. 「新しくプロバイダを追加」ボタンをクリック
3. 「メール・パスワード」にチェックし作成
4. 下記コードを追記

```jsx
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"
```

`getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged`以外のメソッドを使用する場合は `{}`内に追記する。

> [【バージョン9】**利用可能なFirebaseJSSDK（公式）**](https://firebase.google.com/docs/web/learn-more?hl=ja#available-libraries)

# ユーザー登録（サインアップ）

新規ユーザーがメールアドレスとパスワードをフォームに入力し、入力したメールアドレス、パスワードを`createUserWithEmailAndPassword` メソッドをに渡す。

```jsx
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

document.getElementById("register_btn").addEventListener("click", registerUser);
}

const registerUser = function () {
	const $email = document.getElementById("email");
	const $password = document.getElementById("password");
	const email = $email.value;
	const password = $password.value;
	createUserWithEmailAndPassword(getAuth(), email, password)
		.then((userCredential) => {
            //登録が成功した時の処理
		})
		.catch((error) => {
			console.log(error.code);
		});
}
```

管理画面を確認しユーザーが追加されていればOK。
ユーザ登録が成功すると自動的に作成したユーザーでログインされ、`userCredential` にユーザーオブジェクト入る。
`userCredential.user` で下記のようなユーザー情報が取得できる。

```jsx
userCredential.user.accessToken //トークンを取得
userCredential.user.email       //メールアドレスを取得
userCredential.user.uid.        //ユーザーIDを取得
userCredential.user.metadata.createdAt   //ユーザー作成日時を取得
userCredential.user.metadata.lastLoginAt //最終ログイン日時を取得
```

# ログイン

既存ユーザーがメールアドレスとパスワードをフォームに入力し、入力したメールアドレス、パスワードを `signInWithEmailAndPassword` メソッドに渡す。

```jsx

import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

const loginUser = function () {
	const email = document.getElementById("email").value;
	const password = document.getElementById("password").value;
	signInWithEmailAndPassword(getAuth(), email, password)
		.then((userCredential) => {
			//ログイン時の処理を記入
		})
		.catch(() => {
			//エラー時の処理を記入
		});
}
```

ログインもサインインと同様、ログインが成功すれば `userCredential` にログインしたユーザーのオブジェクトが入る。
アクセス方法についてはユーザー登録（サインイン）を参照。

# ログアウト

ユーザーがログインしている状態でログアウトボタンを押すと、 `signOut` メソッドを実行。

```jsx
import { getAuth, signOut } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

document.getElementById("logout_btn").addEventListener("click", logOut);

const logOut = function () {
	const auth = getAuth();
	signOut(auth).then(() => {
		//ログアウトした時の処理
	}).catch((error) => {
		//ログアウトに失敗した時の処理
	});;
}
```

# ログイン状態を監視する

`onAuthStateChanged` メソッドを使用。

- サインイン（自動的にログインされる）
- ログイン
- ログアウト
- アカウント削除（自動的にログアウトされる）
- アカウント情報更新

上記のアクションが実行されるごとにメソッドが呼び出される。
メソッドが呼び出されると、ユーザーに関する情報を取得できる。

```jsx
onAuthStateChanged(getAuth(), observeLoginUser);

const observeLoginUser = function (user) {
	//ログイン状態が変更された時の処理
}
```

ユーザーがログインしていれば`user` にログインユーザーの情報が入る。
ログインしていない場合は `null` が入る。情報アクセスは下記参照。

```jsx
user.accessToken //トークンを取得
user.email       //メールアドレスを取得
user.displayName //画面表示名を取得
user.uid.        //ユーザーIDを取得
user.photoURL    //画像のURLを取得
user.metadata.createdAt   //ユーザー作成日時を取得
user.metadata.lastLoginAt //最終ログイン日時を取得
```

# **ユーザーのプロフィールを更新**

サインインが成功した際、 `updateProfile` メソッドを使用し、ユーザーが入力したメールアドレスを加工（xxxxx@gmail.com ⇒ xxxxx）して`displayName` に設定する場合。

```jsx
import { getAuth, updateProfile } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

document.getElementById("register_btn").addEventListener("click", registerUser);

const registerUser = function () {
    //Authオブジェクトを取得
	const auth = getAuth();
	const email = document.getElementById("email").value;
	const password = document.getElementById("password").value;

	createUserWithEmailAndPassword(auth, email, password)
		//サインイン成功時の処理
		.then(function (userCredential) {

			//updateProfileメソッドでdisplayNameに情報を登録
			updateProfile(auth.currentUser, {
				displayName: auth.currentUser.email.split('@')[0],
			})
				.then(function () {
					//ユーザー情報をアップデートできた時の処理
				}).catch(function () {
					//ユーザー情報をアップデートできなかった時の処理
				});

		}).catch(() => {
		//サインインできなかった時の処理
		});
}
```

# ログインしているユーザーの情報を取得する

`auth.currentUser` でオブジェクトを取得し、ドット記法で取得したい値を指定する。

```jsx
import { getAuth } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

const auth = getAuth();

console.log(auth.currentUser.accessToken);
console.log(auth.currentUser.email);
console.log(auth.currentUser.uid);
console.log(auth.currentUser.photoURL);
```

# ユーザーを削除する

ログイン中のユーザーアカウント削除ボタンを押すと、 `deleteAccount` メソッドにログインユーザーのオブジェクトデータを渡す。

```jsx
import { getAuth, deleteUser } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"

document.getElementById("user_delete_btn").addEventListener("click", deleteAccount);

const deleteAccount = function () {
	const auth = getAuth();
	//引数にログイン中のユーザーデータを渡す
	deleteUser(auth.currentUser).then(function () {
		//削除が成功したときの処理
	}).catch(function (error) {
		//削除が失敗したときの処理
	});
}
```

- 発生したエラー
ログイン状態が長すぎると、アカウント削除ができない場合があった。
再度ログインしてアカウント削除のメソッドを実行すると問題なく削除できた。

# エラーについて

> [Admin Authentication API エラー（公式）](https://firebase.google.com/docs/auth/admin/errors?hl=ja)

# 最後に

何か間違っている箇所などがありましたら、ご指摘くださると幸いです。

# 参考資料

- [スタートガイド（公式）](https://firebase.google.com/docs/auth/web/start?hl=ja)
- [Authenticationメソッド（公式）](https://firebase.google.com/docs/reference/js/auth)
- [Firebase でユーザーを管理する（公式）](https://firebase.google.com/docs/auth/web/manage-users?hl=ja)
- [【バージョン9】利用可能なFirebaseJSSDK（公式）](https://firebase.google.com/docs/web/learn-more?hl=ja#available-libraries)


【Firebase】Authentication（version 9）の使い方

演習でlocalStrageを使ってログイン機能を実装した時に[crypto.js](https://cryptojs.gitbook.io/docs/)を使用し、入力されたパスワードのハッシュ化を行ったので、暗号化とハッシュ化について調べてみた。

# ハッシュ化

ハッシュ化とは特定の計算手法に基づいて、元のデータを不規則な文字列に置換する処理。
ハッシュ化を施すアルゴリズムはハッシュ関数と呼ばれ、ハッシュ関数によって生成されるランダムな文字列はハッシュ値と呼ばれる。
**暗号化は可逆的な変換**であり、**ハッシュ化は不可逆**。

## 使用例

- パスワード保存・管理
- ビットコイン、ブロックチェーン
- 電子メール

## **ハッシュ化の規格**

- **MD5**
現在は非推奨
- **SHA-1**
グーグルも既にSHA-1の証明書受け入れを停止
- **SHA-2**
SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256
- **SHA-3**
2015年に公表された新たなハッシュ関数

# 暗号化

**暗号化**とは、元のデータに処理を施し、別なデータに変換すること。
変換されたデータを元に戻す作業のことを**復号化**という。

## 暗号化の種類

### 共通鍵暗号方式（AES）

共通鍵暗号方式は、**暗号化と復号化に同じ鍵を使う**もの。
暗号化する側と復号化する側以外の第三者に鍵が漏れないように管理する必要があるため、**秘密鍵暗号方式**とも呼ばれる。

### 公開鍵暗号方式（RSA）

公開鍵暗号方式は、**暗号化と復号化に違う鍵を使う**もの。
暗号化には公開された鍵を使い、復号化では受信者がもつ秘密の鍵を使う。復号化する側＝受信者の鍵さえ管理すればよいため、共通鍵暗号方式と比べて、鍵の漏洩リスクは少ないが、暗号化、復号化ともに処理速度が遅いという難点がある。

### ハイブリッド暗号方式

ハイブリッド暗号方式とは、**公開鍵暗号方式と共通鍵暗号方式を組み合わせた暗号方式**
で、Webの暗号で広く普及しているHTTPS（SSL/TLS）などで用いられている。

> [SSL（HTTPS）の仕組みを図解で分かりやすく説明](https://medium-company.com/ssl-仕組み/)


演習でlocalStrageを使ってログイン機能を実装した時に<a href="https://cryptojs.gitbook.io/docs/" rel="nofollow noopener" target="_blank">crypto.js</a>を使用し、入力されたパスワードのハッシュ化を行ったので、暗号化とハッシュ化について調べてみた。
<h1 data-sourcepos="3:1-3:17">
<a href="#%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E5%8C%96"></a>ハッシュ化</h1>
ハッシュ化とは特定の計算手法に基づいて、元のデータを不規則な文字列に置換する処理。 
ハッシュ化を施すアルゴリズムはハッシュ関数と呼ばれ、ハッシュ関数によって生成されるランダムな文字列はハッシュ値と呼ばれる。 
暗号化は可逆的な変換であり、ハッシュ化は不可逆。
<h2 data-sourcepos="9:1-9:12">
<a href="#%E4%BD%BF%E7%94%A8%E4%BE%8B"></a>使用例</h2>
<ul data-sourcepos="11:1-14:0">
<li data-sourcepos="11:1-11:32">パスワード保存・管理</li>
<li data-sourcepos="12:1-12:47">ビットコイン、ブロックチェーン</li>
<li data-sourcepos="13:1-14:0">電子メール</li>
</ul>
<h2 data-sourcepos="15:1-15:31">
<a href="#%E3%83%8F%E3%83%83%E3%82%B7%E3%83%A5%E5%8C%96%E3%81%AE%E8%A6%8F%E6%A0%BC"></a>ハッシュ化の規格
</h2>
<ul data-sourcepos="17:1-25:0">
<li data-sourcepos="17:1-18:18">
MD5 
現在は非推奨</li>
<li data-sourcepos="19:1-20:59">
SHA-1 
グーグルも既にSHA-1の証明書受け入れを停止</li>
<li data-sourcepos="21:1-22:55">
SHA-2 
SHA-256、SHA-384、SHA-512、SHA-512/224、SHA-512/256</li>
<li data-sourcepos="23:1-25:0">
SHA-3 
2015年に公表された新たなハッシュ関数</li>
</ul>
<h1 data-sourcepos="26:1-26:11">
<a href="#%E6%9A%97%E5%8F%B7%E5%8C%96"></a>暗号化</h1>
暗号化とは、元のデータに処理を施し、別なデータに変換すること。 
変換されたデータを元に戻す作業のことを復号化という。
<h2 data-sourcepos="31:1-31:21">
<a href="#%E6%9A%97%E5%8F%B7%E5%8C%96%E3%81%AE%E7%A8%AE%E9%A1%9E"></a>暗号化の種類</h2>
<h3 data-sourcepos="33:1-33:34">
<a href="#%E5%85%B1%E9%80%9A%E9%8D%B5%E6%9A%97%E5%8F%B7%E6%96%B9%E5%BC%8Faes"></a>共通鍵暗号方式（AES）</h3>
共通鍵暗号方式は、暗号化と復号化に同じ鍵を使うもの。 
暗号化する側と復号化する側以外の第三者に鍵が漏れないように管理する必要があるため、秘密鍵暗号方式とも呼ばれる。
<h3 data-sourcepos="38:1-38:34">
<a href="#%E5%85%AC%E9%96%8B%E9%8D%B5%E6%9A%97%E5%8F%B7%E6%96%B9%E5%BC%8Frsa"></a>公開鍵暗号方式（RSA）</h3>
公開鍵暗号方式は、暗号化と復号化に違う鍵を使うもの。 
暗号化には公開された鍵を使い、復号化では受信者がもつ秘密の鍵を使う。復号化する側＝受信者の鍵さえ管理すればよいため、共通鍵暗号方式と比べて、鍵の漏洩リスクは少ないが、暗号化、復号化ともに処理速度が遅いという難点がある。
<h3 data-sourcepos="43:1-43:34">
<a href="#%E3%83%8F%E3%82%A4%E3%83%96%E3%83%AA%E3%83%83%E3%83%89%E6%9A%97%E5%8F%B7%E6%96%B9%E5%BC%8F"></a>ハイブリッド暗号方式</h3>
ハイブリッド暗号方式とは、公開鍵暗号方式と共通鍵暗号方式を組み合わせた暗号方式 
で、Webの暗号で広く普及しているHTTPS（SSL/TLS）などで用いられている。
<blockquote data-sourcepos="48:1-48:109">
<a href="https://medium-company.com/ssl-%E4%BB%95%E7%B5%84%E3%81%BF/" rel="nofollow noopener" target="_blank">SSL（HTTPS）の仕組みを図解で分かりやすく説明</a>
</blockquote>

暗号化とハッシュ化の違いとは

# データを保存

```jsx
localStorage.setItem("key", "value");
```

## 複数データを保存

```jsx
let user_data = {
  gender: "男性",
  win: 0,
  lose: 0
}
localStorage.setItem("key", JSON.stringify(user_data)); //JSON形式へ変換
```

# データを取得

```jsx
localStorage.getItem("key");
```

## 取得したデータをJSONに変換し出力

```jsx
JSON.parse(localStorage.getItem("key"));
```

JSONに変換する理由は、valueに複数の値がセットされている場合に `“.” で繋ぐことにより値を取得`できるため。

```jsx
//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

// 出力：田中
```

# データを更新

基本的には `localStorage.setItem("key", "value");` で上書き保存できるが、下記のように `value` に複数のデータが入っている場合、1つのデータのみ（nameの田中のみ）を更新し、その他のデータをそのまま保持させることはできない。
例えば、`name`データのみ更新する場合に`localStorage.setItem("user", "ブライアン");`としてしまうと`name`以外のデータは消えてしまう。なので下記のような記述が必要。

```jsx
//key => user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

//value
let data = {
	"name": "ブライアン", //名前のみの更新でも全てのデータを上書きが必要
	"password": "xxxxxxx",
	"win": 0,
	"lose": 0
}
localStorage.setItem("user", JSON.stringify(data));
```

# 特定のデータを削除

```jsx
localStorage.removeItem("key");
```

# 全データを削除

```jsx
localStorage.clear();
```

# 特定のキーが存在しているかチェックする

```jsx
if(localStorage.hasOwnProperty("key")) {
    console.log("このキーは存在しています");
}
```

戻り値はデータが存在すれば `true` 
データが存在しなければ `false`  

# 参考

- [localStorageの使い方・実例全９件！](https://blog.capilano-fw.com/?p=5341)
- [LocalStorageをもっとデータベースライクに使う方法](https://qiita.com/masamitsu-konya/items/ce7f6469434076448238)
- [jsonを配列に、配列をJSONに](https://notepad-blog.com/content/129/)


<h1 data-sourcepos="1:1-1:20">
<a href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E4%BF%9D%E5%AD%98"></a>データを保存</h1>
<div class="code-frame" data-lang="jsx" data-sourcepos="3:1-5:3"><div class="highlight"><pre><code>localStorage.setItem("key", "value");
</code></pre></div></div>
<h2 data-sourcepos="7:1-7:27">
<a href="#%E8%A4%87%E6%95%B0%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E4%BF%9D%E5%AD%98"></a>複数データを保存</h2>
<div class="code-frame" data-lang="jsx" data-sourcepos="9:1-16:3"><div class="highlight"><pre><code>let user_data = {
 gender: "男性",
 win: 0,
 lose: 0
}
localStorage.setItem("key", JSON.stringify(user_data)); //JSON形式へ変換
</code></pre></div></div>
<h1 data-sourcepos="18:1-18:20">
<a href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%8F%96%E5%BE%97"></a>データを取得</h1>
<div class="code-frame" data-lang="jsx" data-sourcepos="20:1-22:3"><div class="highlight"><pre><code>localStorage.getItem("key");
</code></pre></div></div>
<h2 data-sourcepos="24:1-24:49">
<a href="#%E5%8F%96%E5%BE%97%E3%81%97%E3%81%9F%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92json%E3%81%AB%E5%A4%89%E6%8F%9B%E3%81%97%E5%87%BA%E5%8A%9B"></a>取得したデータをJSONに変換し出力</h2>
<div class="code-frame" data-lang="jsx" data-sourcepos="26:1-28:3"><div class="highlight"><pre><code>JSON.parse(localStorage.getItem("key"));
</code></pre></div></div>
JSONに変換する理由は、valueに複数の値がセットされている場合に <code>“.” で繋ぐことにより値を取得</code>できるため。
<div class="code-frame" data-lang="jsx" data-sourcepos="32:1-42:3"><div class="highlight"><pre><code>//key =&gt; user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

// 出力：田中
</code></pre></div></div>
<h1 data-sourcepos="44:1-44:20">
<a href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E6%9B%B4%E6%96%B0"></a>データを更新</h1>
基本的には <code>localStorage.setItem("key", "value");</code> で上書き保存できるが、下記のように <code>value</code> に複数のデータが入っている場合、1つのデータのみ（nameの田中のみ）を更新し、その他のデータをそのまま保持させることはできない。 
例えば、<code>name</code>データのみ更新する場合に<code>localStorage.setItem("user", "ブライアン");</code>としてしまうと<code>name</code>以外のデータは消えてしまう。なので下記のような記述が必要。
<div class="code-frame" data-lang="jsx" data-sourcepos="49:1-63:3"><div class="highlight"><pre><code>//key =&gt; user

//value
{"name":"田中","password":"xxxxxxx","win":"0","lose":"0",}

//value
let data = {
	"name": "ブライアン", //名前のみの更新でも全てのデータを上書きが必要
	"password": "xxxxxxx",
	"win": 0,
	"lose": 0
}
localStorage.setItem("user", JSON.stringify(data));
</code></pre></div></div>
<h1 data-sourcepos="65:1-65:29">
<a href="#%E7%89%B9%E5%AE%9A%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%89%8A%E9%99%A4"></a>特定のデータを削除</h1>
<div class="code-frame" data-lang="jsx" data-sourcepos="67:1-69:3"><div class="highlight"><pre><code>localStorage.removeItem("key");
</code></pre></div></div>
<h1 data-sourcepos="71:1-71:23">
<a href="#%E5%85%A8%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E5%89%8A%E9%99%A4"></a>全データを削除</h1>
<div class="code-frame" data-lang="jsx" data-sourcepos="73:1-75:3"><div class="highlight"><pre><code>localStorage.clear();
</code></pre></div></div>
<h1 data-sourcepos="77:1-77:59">
<a href="#%E7%89%B9%E5%AE%9A%E3%81%AE%E3%82%AD%E3%83%BC%E3%81%8C%E5%AD%98%E5%9C%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%81%8B%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%99%E3%82%8B"></a>特定のキーが存在しているかチェックする</h1>
<div class="code-frame" data-lang="jsx" data-sourcepos="79:1-83:3"><div class="highlight"><pre><code>if(localStorage.hasOwnProperty("key")) {
 console.log("このキーは存在しています");
}
</code></pre></div></div>
戻り値はデータが存在すれば <code>true</code> 
データが存在しなければ <code>false</code>
<h1 data-sourcepos="88:1-88:8">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h1>
<ul data-sourcepos="90:1-92:78">
<li data-sourcepos="90:1-90:87"><a href="https://blog.capilano-fw.com/?p=5341" rel="nofollow noopener" target="_blank">localStorageの使い方・実例全９件！</a></li>
<li data-sourcepos="91:1-91:132"><a href="https://qiita.com/masamitsu-konya/items/ce7f6469434076448238" id="reference-2b67785e24a5afe1e484">LocalStorageをもっとデータベースライクに使う方法</a></li>
<li data-sourcepos="92:1-92:78"><a href="https://notepad-blog.com/content/129/" rel="nofollow noopener" target="_blank">jsonを配列に、配列をJSONに</a></li>
</ul>

localStorageデータ操作あれこれ（保存、取得、更新、削除など）

ajaxにてYouTube Data APIのSearch（検索）を使用し、特定の検索ワードで動画タイトル、サムネイル、URLを取得する。

# 準備

1. [https://console.cloud.google.com/apis/dashboard](https://console.cloud.google.com/apis/dashboard)にアクセスし、プロジェクトを作成
2. メニューから **「APIとサービス」** → **「認証情報」** をクリック
3. ページ上部の **「認証情報を作成」** → **「APIキー」** をクリック
4. キーが作成されるのでコピーしどこかに控えておく
5. APIキーの設定を行う
参考：[https://hi3103.net/notes/web/1271](https://hi3103.net/notes/web/1271)

# jQuery + Ajax で YouTube Data APIを使用

## Search（検索結果のコレクションを返す）

ajaxでリクエストを送信しデータを受け取る。
クエリパラメーターは公式ドキュメント参照。
参考：[Search（公式）](https://developers.google.com/youtube/v3/docs/search/list)

```jsx
 const $button = $("#youtube > ul.btn_blk > li > button");
 const $mov_blk = $("#youtube > ul.mov_blk");
 const KEY = "XXXXXXXXXXXXXXXXX";

 $button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&part=snippet";
 url += "&type=video";
 url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "jsonp",
 })
 .done(function (data) {
				$mov_blk.empty();
 for (let i = 0; i < data.items.length; i++) {
 let html = `
 <li>
 <a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
 <dl>
 <dt>
 <img src="${data.items[i].snippet.thumbnails.high.url}">
 </dt>
 <dd>${data.items[i].snippet.title}</dd>
 </dl>
 </a>
 </li>
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('<li class="no_video">検索結果はありません</li>')
 });
 });
```

動画URLは下記URLの末尾に取得した `videoId`を追加したもの。
`
https://www.youtube.com/watch?v=【取得したvideoId】
`

## 実装中に発生したエラー

- ["CORSポリシーによってブロックされています" によりデータが取得できない](https://qiita.com/shiho97797/items/76e61b67181b0930d02d)

# Youtube APIの利用料金について

- [Youtube APIの利用料金について](https://groups.google.com/g/youtube-api-jp/c/nw7f7uugjcg?pli=1)

# 注意点

- `1日10000クォータ`までデータ取得可能
クォータ：データ通信する際に必要なパケット料のようなもの
参考：[クォータを確認する](https://developers.google.com/youtube/v3/determine_quota_cost)、[クォータの使用料（公式）](https://developers.google.com/youtube/v3/getting-started#quota)
- 上限を超えてしまうとAPIを叩けなくなる
- 上限を超えた場合は追加申請が必要
参考：[YouTube API サービス - 監査と割り当て増加フォーム](https://support.google.com/youtube/contact/yt_api_form)

# 参考記事

- [YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax](https://hi3103.net/notes/web/1271)
- [YouTube Data API v3を使用（LIG）](https://liginc.co.jp/497428)
- [YouTube videoidをURLから取得する](https://podluck.wordpress.com/2013/06/23/tips-youtube-videoid%E3%82%92url%E3%81%8B%E3%82%89%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/)

ajaxにてYouTube Data APIのSearch（検索）を使用し、特定の検索ワードで動画タイトル、サムネイル、URLを取得する。
<h1 data-sourcepos="3:1-3:8">
<a href="#%E6%BA%96%E5%82%99"></a>準備</h1>
<ol data-sourcepos="5:1-11:0">
<li data-sourcepos="5:1-5:149">
<a href="https://console.cloud.google.com/apis/dashboard" rel="nofollow noopener" target="_blank">https://console.cloud.google.com/apis/dashboard</a>にアクセスし、プロジェクトを作成</li>
<li data-sourcepos="6:1-6:93">メニューから 「APIとサービス」 → 「認証情報」 をクリック</li>
<li data-sourcepos="7:1-7:93">ページ上部の 「認証情報を作成」 → 「APIキー」 をクリック</li>
<li data-sourcepos="8:1-8:72">キーが作成されるのでコピーしどこかに控えておく</li>
<li data-sourcepos="9:1-11:0">APIキーの設定を行う 
参考：<a href="https://hi3103.net/notes/web/1271" rel="nofollow noopener" target="_blank">https://hi3103.net/notes/web/1271</a>
</li>
</ol>
<h1 data-sourcepos="12:1-12:45">
<a href="#jquery--ajax-%E3%81%A7-youtube-data-api%E3%82%92%E4%BD%BF%E7%94%A8"></a>jQuery + Ajax で YouTube Data APIを使用</h1>
<h2 data-sourcepos="14:1-14:57">
<a href="#search%E6%A4%9C%E7%B4%A2%E7%B5%90%E6%9E%9C%E3%81%AE%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%BF%94%E3%81%99"></a>Search（検索結果のコレクションを返す）</h2>
ajaxでリクエストを送信しデータを受け取る。 
クエリパラメーターは公式ドキュメント参照。 
参考：<a href="https://developers.google.com/youtube/v3/docs/search/list" rel="nofollow noopener" target="_blank">Search（公式）</a>
<div class="code-frame" data-lang="jsx" data-sourcepos="20:1-59:3"><div class="highlight"><pre><code> const $button = $("#youtube &gt; ul.btn_blk &gt; li &gt; button");
 const $mov_blk = $("#youtube &gt; ul.mov_blk");
 const KEY = "XXXXXXXXXXXXXXXXX";

 $button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&amp;part=snippet";
 url += "&amp;type=video";
 url += "&amp;q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&amp;maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "jsonp",
 })
 .done(function (data) {
				$mov_blk.empty();
 for (let i = 0; i &lt; data.items.length; i++) {
 let html = `
 &lt;li&gt;
 &lt;a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank"&gt;
 &lt;dl&gt;
 &lt;dt&gt;
 &lt;img src="${data.items[i].snippet.thumbnails.high.url}"&gt;
 &lt;/dt&gt;
 &lt;dd&gt;${data.items[i].snippet.title}&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('&lt;li class="no_video"&gt;検索結果はありません&lt;/li&gt;')
 });
 });
</code></pre></div></div>
動画URLは下記URLの末尾に取得した <code>videoId</code>を追加したもの。 
<code>https://www.youtube.com/watch?v=【取得したvideoId】</code>
<h2 data-sourcepos="66:1-66:36">
<a href="#%E5%AE%9F%E8%A3%85%E4%B8%AD%E3%81%AB%E7%99%BA%E7%94%9F%E3%81%97%E3%81%9F%E3%82%A8%E3%83%A9%E3%83%BC"></a>実装中に発生したエラー</h2>
<ul data-sourcepos="68:1-69:0">
<li data-sourcepos="68:1-69:0"><a href="https://qiita.com/shiho97797/items/76e61b67181b0930d02d" id="reference-662482da830e6fba06d6">"CORSポリシーによってブロックされています" によりデータが取得できない</a></li>
</ul>
<h1 data-sourcepos="70:1-70:40">
<a href="#youtube-api%E3%81%AE%E5%88%A9%E7%94%A8%E6%96%99%E9%87%91%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"></a>Youtube APIの利用料金について</h1>
<ul data-sourcepos="72:1-73:0">
<li data-sourcepos="72:1-73:0"><a href="https://groups.google.com/g/youtube-api-jp/c/nw7f7uugjcg?pli=1" rel="nofollow noopener" target="_blank">Youtube APIの利用料金について</a></li>
</ul>
<h1 data-sourcepos="74:1-74:11">
<a href="#%E6%B3%A8%E6%84%8F%E7%82%B9"></a>注意点</h1>
<ul data-sourcepos="76:1-82:0">
<li data-sourcepos="76:1-78:206">
<code>1日10000クォータ</code>までデータ取得可能 
クォータ：データ通信する際に必要なパケット料のようなもの 
参考：<a href="https://developers.google.com/youtube/v3/determine_quota_cost" rel="nofollow noopener" target="_blank">クォータを確認する</a>、<a href="https://developers.google.com/youtube/v3/getting-started#quota" rel="nofollow noopener" target="_blank">クォータの使用料（公式）</a>
</li>
<li data-sourcepos="79:1-79:56">上限を超えてしまうとAPIを叩けなくなる</li>
<li data-sourcepos="80:1-82:0">上限を超えた場合は追加申請が必要 
参考：<a href="https://support.google.com/youtube/contact/yt_api_form" rel="nofollow noopener" target="_blank">YouTube API サービス - 監査と割り当て増加フォーム</a>
</li>
</ul>
<h1 data-sourcepos="83:1-83:14">
<a href="#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B"></a>参考記事</h1>
<ul data-sourcepos="85:1-87:173">
<li data-sourcepos="85:1-85:155"><a href="https://hi3103.net/notes/web/1271" rel="nofollow noopener" target="_blank">YouTube Data API v3 を使って任意のプレイリストの動画情報をJSON形式で取得する jQuery + Ajax</a></li>
<li data-sourcepos="86:1-86:70"><a href="https://liginc.co.jp/497428" rel="nofollow noopener" target="_blank">YouTube Data API v3を使用（LIG）</a></li>
<li data-sourcepos="87:1-87:173"><a href="https://podluck.wordpress.com/2013/06/23/tips-youtube-videoid%E3%82%92url%E3%81%8B%E3%82%89%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B/" rel="nofollow noopener" target="_blank">YouTube videoidをURLから取得する</a></li>
</ul>

YouTube Data APIの使い方

# １．実現したいこと

jQuery + Ajax で YouTube Data APIを使用し、特定のキーワードで検索を行い、動画のサムネイル、タイトル、URLを取得したい。
そのためにボタンを押した際、下記コードでサーバーにリクエストを送信した。

```javascript:main.js
$button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&part=snippet";
 url += "&type=video";
 url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "json",
 })
 .done(function (data) {
 for (let i = 0; i < data.items.length; i++) {
 let html = `
 <li>
 <a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
 <dl>
 <dt>
 <img src="${data.items[i].snippet.thumbnails.high.url}">
 </dt>
 <dd>${data.items[i].snippet.title}</dd>
 </dl>
 </a>
 </li>
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('<li class="no_video">検索結果はありません</li>')
 });
 });
```

# ２．エラー内容

>Access to XMLHttpRequest'リクエストを送ったURL' is blocked by CORS policy: No'Access-Control- The Allow-Origin header is present in the requested resource.

**【日本語訳】**
URLはCORSポリシーによってブロックされています：いいえ' Access-Control-Allow- Originのヘッダーはリクエストされたリソースに存在します。

# **３．調査**

以下のワードでググる
- Access-Control-Allow-Origin ajax
- CORSポリシーによってブロック

# **４．原因**

クロスドメインに引っかかりエラーが出ていた。
CORSという制約により、やり取りする間で特別な取り決めが無い限り、すべてのサーバーと自由にやり取りをできるわけではない（同じドメイン以外は通信不可）

参考：[クロスドメイン](https://otiai10.hatenablog.com/entry/2013/04/04/233057)、[CORS](https://javascript.keicode.com/newjs/what-is-cors.php)

# **５．解決策**

`dataType: "jsonp"`に変更。

```javascript:main.js
$button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&part=snippet";
 url += "&type=video";
 url += "&q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "jsonp", //jsonpに変更
 })
 .done(function (data) {
 for (let i = 0; i < data.items.length; i++) {
 let html = `
 <li>
 <a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank">
 <dl>
 <dt>
 <img src="${data.items[i].snippet.thumbnails.high.url}">
 </dt>
 <dd>${data.items[i].snippet.title}</dd>
 </dl>
 </a>
 </li>
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('<li class="no_video">検索結果はありません</li>')
 });
 });
```

▼JSONPとは
異なるドメインに存在するデータを取得する仕組みのこと。

JSONPは危険という記事もあったので、実用であれば **”Access-Control-Allow-Origin”** をPHPや.htaccessで設定した方が安全かもしれません。

参考：[JSONPは危険なので禁止](https://blog.ohgaki.net/stop-using-jsonp#i)

# **６．参考資料**

- [Ajaxにおけるクロスドメインの問題を回避する方法](https://www.bloguchi.info/1679)
- [CORS とは？](https://javascript.keicode.com/newjs/what-is-cors.php)
- [4ステップで作って学ぶJSONP](https://zenn.dev/bun913/articles/0c807fa8da262e)
- [JSONPは危険なので禁止](https://blog.ohgaki.net/stop-using-jsonp#i)

<h1 data-sourcepos="1:1-1:29">
<a href="#%EF%BC%91%E5%AE%9F%E7%8F%BE%E3%81%97%E3%81%9F%E3%81%84%E3%81%93%E3%81%A8"></a>１．実現したいこと</h1>
jQuery + Ajax で YouTube Data APIを使用し、特定のキーワードで検索を行い、動画のサムネイル、タイトル、URLを取得したい。 
そのためにボタンを押した際、下記コードでサーバーにリクエストを送信した。
<div class="code-frame" data-lang="javascript" data-sourcepos="6:1-40:3">
<div class="code-lang">main.js</div>
<div class="highlight"><pre><code>$button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&amp;part=snippet";
 url += "&amp;type=video";
 url += "&amp;q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&amp;maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "json",
 })
 .done(function (data) {
 for (let i = 0; i &lt; data.items.length; i++) {
 let html = `
 &lt;li&gt;
 &lt;a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank"&gt;
 &lt;dl&gt;
 &lt;dt&gt;
 &lt;img src="${data.items[i].snippet.thumbnails.high.url}"&gt;
 &lt;/dt&gt;
 &lt;dd&gt;${data.items[i].snippet.title}&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('&lt;li class="no_video"&gt;検索結果はありません&lt;/li&gt;')
 });
 });
</code></pre></div>
</div>
<h1 data-sourcepos="42:1-42:23">
<a href="#%EF%BC%92%E3%82%A8%E3%83%A9%E3%83%BC%E5%86%85%E5%AE%B9"></a>２．エラー内容</h1>
<blockquote data-sourcepos="44:1-44:165">
Access to XMLHttpRequest'リクエストを送ったURL' is blocked by CORS policy: No'Access-Control- The Allow-Origin header is present in the requested resource.
</blockquote>
【日本語訳】 
URLはCORSポリシーによってブロックされています：いいえ' Access-Control-Allow- Originのヘッダーはリクエストされたリソースに存在します。
<h1 data-sourcepos="49:1-49:18">
<a href="#%EF%BC%93%E8%AA%BF%E6%9F%BB"></a>３．調査
</h1>
以下のワードでググる
<ul data-sourcepos="52:1-54:0">
<li data-sourcepos="52:1-52:34">Access-Control-Allow-Origin ajax</li>
<li data-sourcepos="53:1-54:0">CORSポリシーによってブロック</li>
</ul>
<h1 data-sourcepos="55:1-55:18">
<a href="#%EF%BC%94%E5%8E%9F%E5%9B%A0"></a>４．原因
</h1>
クロスドメインに引っかかりエラーが出ていた。 
CORSという制約により、やり取りする間で特別な取り決めが無い限り、すべてのサーバーと自由にやり取りをできるわけではない（同じドメイン以外は通信不可）
参考：<a href="https://otiai10.hatenablog.com/entry/2013/04/04/233057" rel="nofollow noopener" target="_blank">クロスドメイン</a>、<a href="https://javascript.keicode.com/newjs/what-is-cors.php" rel="nofollow noopener" target="_blank">CORS</a>
<h1 data-sourcepos="62:1-62:21">
<a href="#%EF%BC%95%E8%A7%A3%E6%B1%BA%E7%AD%96"></a>５．解決策
</h1>
<code>dataType: "jsonp"</code>に変更。
<div class="code-frame" data-lang="javascript" data-sourcepos="66:1-100:3">
<div class="code-lang">main.js</div>
<div class="highlight"><pre><code>$button.on("click", function () {
 let url = "https://www.googleapis.com/youtube/v3/search";
 url += "?key=" + KEY;
 url += "&amp;part=snippet";
 url += "&amp;type=video";
 url += "&amp;q=%20筋トレ%20ジム" + $(this).data("parts");
 url += "&amp;maxResults=6";
 $.ajax({
 url: url,
 type: "GET",
 dataType: "jsonp", //jsonpに変更
 })
 .done(function (data) {
 for (let i = 0; i &lt; data.items.length; i++) {
 let html = `
 &lt;li&gt;
 &lt;a href="https://www.youtube.com/watch?v=${data.items[i].id.videoId}" target="_blank"&gt;
 &lt;dl&gt;
 &lt;dt&gt;
 &lt;img src="${data.items[i].snippet.thumbnails.high.url}"&gt;
 &lt;/dt&gt;
 &lt;dd&gt;${data.items[i].snippet.title}&lt;/dd&gt;
 &lt;/dl&gt;
 &lt;/a&gt;
 &lt;/li&gt;
 `;
 $mov_blk.append(html);
 }
 })
 .fail(function () {
 $mov_blk.html('&lt;li class="no_video"&gt;検索結果はありません&lt;/li&gt;')
 });
 });
</code></pre></div>
</div>
▼JSONPとは 
異なるドメインに存在するデータを取得する仕組みのこと。
JSONPは危険という記事もあったので、実用であれば ”Access-Control-Allow-Origin” をPHPや.htaccessで設定した方が安全かもしれません。
参考：<a href="https://blog.ohgaki.net/stop-using-jsonp#i" rel="nofollow noopener" target="_blank">JSONPは危険なので禁止</a>
<h1 data-sourcepos="109:1-109:24">
<a href="#%EF%BC%96%E5%8F%82%E8%80%83%E8%B3%87%E6%96%99"></a>６．参考資料
</h1>
<ul data-sourcepos="111:1-114:77">
<li data-sourcepos="111:1-111:103"><a href="https://www.bloguchi.info/1679" rel="nofollow noopener" target="_blank">Ajaxにおけるクロスドメインの問題を回避する方法</a></li>
<li data-sourcepos="112:1-112:73"><a href="https://javascript.keicode.com/newjs/what-is-cors.php" rel="nofollow noopener" target="_blank">CORS とは？</a></li>
<li data-sourcepos="113:1-113:89"><a href="https://zenn.dev/bun913/articles/0c807fa8da262e" rel="nofollow noopener" target="_blank">4ステップで作って学ぶJSONP</a></li>
<li data-sourcepos="114:1-114:77"><a href="https://blog.ohgaki.net/stop-using-jsonp#i" rel="nofollow noopener" target="_blank">JSONPは危険なので禁止</a></li>
</ul>

【ajax】"CORSポリシーによってブロックされています" によりデータが取得できない

## 実装サンプル

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/02ffd2bb-47c4-e2c4-d4ef-c9b563435c46.gif)

## コード

```html
		
<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <link rel="stylesheet" href="./css/style.css" />
 </head>
 <body class="top_page">
	・
	・
	・
	<div id="cursor"></div>
 <div id="stalker"></div>
	・
	・
	・
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="./js/main.js"></script>
 </body>
</html>
```

```css
#cursor {
 width: 26px;
 height: 26px;
 background-image: url("../img/icon_cheese.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}

#stalker {
 width: 30px;
 height: 30px;
 background-image: url("../img/icon_mouse.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}
```

```jsx
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) {
 let x = e.clientX;
 let y = e.clientY;
 $cursor.css({
 'top': y + 'px',
 'left': x + 'px',
 'transform': 'translate(-50%, -50%)',
 })
 setTimeout(function () {
 $stalker.css({
 'top': y + 'px',
 'left': x + 'px',
 'transform': 'translate(20px, -16px)',
 });
 }, 100);
});
```

## 解説

### HTML

```html
<div id="cursor"></div>
<div id="stalker"></div>
```

マウスカーソルに追従させる要素を作成。
カーソルのみの場合はストーカー用のタグは不要。

### CSS


```css
#cursor {
 width: 26px;
 height: 26px;
 background-image: url("../img/icon_cheese.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}

#stalker {
 width: 30px;
 height: 30px;
 background-image: url("../img/icon_mouse.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}
```

マウスカーソル要素を絶対配置（position: fixed）を設定。
fixedにしないと画面をスクロールした際にカーソルがどっかに行ってしまう。
デザインはWEBページなどのテーマに合わせてお好みで ！
デフォルトのカーソルを非表示にしたい場合は

```css
body,
a,
input,
select,
textarea {
	cursor: none;
}
```

を指定し非表示にする。

### jQuery

```jsx
let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) { // マウスが動くたびにイベント発火
 let x = e.clientX; // マウスのX軸座標を取得
 let y = e.clientY; // マウスのY軸座標を取得
 $cursor.css({
 'top': y + 'px', // 取得した座標でY軸を動的に変更
 'left': x + 'px', // 取得した座標でX軸を動的に変更
 'transform': 'translate(-50%, -50%)',　// カーソルを中央に配置
 })
 setTimeout(function () { // ストーカーがない場合は不要
 $stalker.css({
 'top': y + 'px', // Y軸を動的に変更
 'left': x + 'px', // X軸を動的に変更
 'transform': 'translate(20px, -16px)',
 });
 }, 100); // 0.1秒後にストーカーを追従
});
```

まずは、カーソルとストライカーのDOMを取得。
次にマウスカーソルが動くたびにイベントを発火させ、マウスカーソルのXとY軸の座標を取得し、取得した座標で動的にCSSの値（top: 0 left: 0）を変更し、マウスカーソルに追従させる。
このままだとカーソルの配置が左上に寄ってしまうので、transformでカーソルを中央に配置。
ストーカーがある場合はsetTimeoutで指定の秒数後に追従させる。

以上です。

<h2 data-sourcepos="1:1-1:21">
<a href="#%E5%AE%9F%E8%A3%85%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB"></a>実装サンプル</h2>
<a href="https://camo.qiitausercontent.com/5e3f125d0ac773046216d7bb51db89625a448b5b/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f323633383537322f30326666643262622d343763342d653263342d643465662d6339623536333433356334362e676966" target="_blank" rel="nofollow noopener"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/02ffd2bb-47c4-e2c4-d4ef-c9b563435c46.gif" alt="demo.gif" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/02ffd2bb-47c4-e2c4-d4ef-c9b563435c46.gif" loading="lazy"></a>
<h2 data-sourcepos="5:1-5:12">
<a href="#%E3%82%B3%E3%83%BC%E3%83%89"></a>コード</h2>
<div class="code-frame" data-lang="html" data-sourcepos="7:1-30:3"><div class="highlight"><pre><code>		
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
 &lt;head&gt;
 &lt;meta charset="UTF-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
 &lt;link rel="stylesheet" href="./css/style.css" /&gt;
 &lt;/head&gt;
 &lt;body class="top_page"&gt;
	・
	・
	・
	&lt;div id="cursor"&gt;&lt;/div&gt;
 &lt;div id="stalker"&gt;&lt;/div&gt;
	・
	・
	・
	&lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
 &lt;script src="./js/main.js"&gt;&lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre></div></div>
<div class="code-frame" data-lang="css" data-sourcepos="32:1-58:3"><div class="highlight"><pre><code>#cursor {
 width: 26px;
 height: 26px;
 background-image: url("../img/icon_cheese.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}

#stalker {
 width: 30px;
 height: 30px;
 background-image: url("../img/icon_mouse.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}
</code></pre></div></div>
<div class="code-frame" data-lang="jsx" data-sourcepos="60:1-79:3"><div class="highlight"><pre><code>let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) {
 let x = e.clientX;
 let y = e.clientY;
 $cursor.css({
 'top': y + 'px',
 'left': x + 'px',
 'transform': 'translate(-50%, -50%)',
 })
 setTimeout(function () {
 $stalker.css({
 'top': y + 'px',
 'left': x + 'px',
 'transform': 'translate(20px, -16px)',
 });
 }, 100);
});
</code></pre></div></div>
<h2 data-sourcepos="81:1-81:9">
<a href="#%E8%A7%A3%E8%AA%AC"></a>解説</h2>
<h3 data-sourcepos="83:1-83:8">
<a href="#html"></a>HTML</h3>
<div class="code-frame" data-lang="html" data-sourcepos="85:1-88:3"><div class="highlight"><pre><code>&lt;div id="cursor"&gt;&lt;/div&gt;
&lt;div id="stalker"&gt;&lt;/div&gt;
</code></pre></div></div>
マウスカーソルに追従させる要素を作成。 
カーソルのみの場合はストーカー用のタグは不要。
<h3 data-sourcepos="93:1-93:7">
<a href="#css"></a>CSS</h3>
<div class="code-frame" data-lang="css" data-sourcepos="96:1-122:3"><div class="highlight"><pre><code>#cursor {
 width: 26px;
 height: 26px;
 background-image: url("../img/icon_cheese.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}

#stalker {
 width: 30px;
 height: 30px;
 background-image: url("../img/icon_mouse.png");
 background-size: contain;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 pointer-events: none;
 position: fixed;
 top: 0;
 left: 0;
}
</code></pre></div></div>
マウスカーソル要素を絶対配置（position: fixed）を設定。 
fixedにしないと画面をスクロールした際にカーソルがどっかに行ってしまう。 
デザインはWEBページなどのテーマに合わせてお好みで ！ 
デフォルトのカーソルを非表示にしたい場合は
<div class="code-frame" data-lang="css" data-sourcepos="129:1-137:3"><div class="highlight"><pre><code>body,
a,
input,
select,
textarea {
	cursor: none;
}
</code></pre></div></div>
を指定し非表示にする。
<h3 data-sourcepos="141:1-141:10">
<a href="#jquery"></a>jQuery</h3>
<div class="code-frame" data-lang="jsx" data-sourcepos="143:1-162:3"><div class="highlight"><pre><code>let $cursor = $("#cursor");
let $stalker = $("#stalker");
$(document).on('mousemove', function (e) { // マウスが動くたびにイベント発火
 let x = e.clientX; // マウスのX軸座標を取得
 let y = e.clientY; // マウスのY軸座標を取得
 $cursor.css({
 'top': y + 'px', // 取得した座標でY軸を動的に変更
 'left': x + 'px', // 取得した座標でX軸を動的に変更
 'transform': 'translate(-50%, -50%)',　// カーソルを中央に配置
 })
 setTimeout(function () { // ストーカーがない場合は不要
 $stalker.css({
 'top': y + 'px', // Y軸を動的に変更
 'left': x + 'px', // X軸を動的に変更
 'transform': 'translate(20px, -16px)',
 });
 }, 100); // 0.1秒後にストーカーを追従
});
</code></pre></div></div>
まずは、カーソルとストライカーのDOMを取得。 
次にマウスカーソルが動くたびにイベントを発火させ、マウスカーソルのXとY軸の座標を取得し、取得した座標で動的にCSSの値（top: 0 left: 0）を変更し、マウスカーソルに追従させる。 
このままだとカーソルの配置が左上に寄ってしまうので、transformでカーソルを中央に配置。 
ストーカーがある場合はsetTimeoutで指定の秒数後に追従させる。
以上です。

Qiita