## 実装

### 基本的なファイルを作成

```bash
# Model, Controller, Migration, Seederファイルを作成 
php artisan make:model [Model名] -crms
```

### Interfaceを作成

```php
// app/Interfaces/TaskInterface.php

namespace App\Interfaces;

interface TaskInterface
{
    public function index();
    public function store(array $data);
    public function show(string $id);
    public function update(string $id, array $data);
    public function destroy(string $id);
}
```

### Serviceを作成

```php
// app/Services/TaskService.php

namespace App\Services;

use App\Interfaces\TaskInterface;

class TaskService
{
	// メンバ変数にセット
  public function __construct(TaskInterface $taskInterface)
  {
    $this->taskInterface = $taskInterface;
  }

  public function index()
  {
	  // インターフェースで定義したメソッドを呼び出す
    return $this->taskInterface->index();
  }
}
```

- `TaskInterface` をコンストラクタに渡してメンバ変数にセット
- 各メソッドでインターフェースで定義したメソッドを呼び出す

### ControllerからServiceを読み込む

```php
// app/Http/Controllers/Task/TaskController.php

namespace App\Http\Controllers\Task;

use App\Http\Controllers\Controller;
use App\Models\Task\Task;
use App\Services\TaskService;
use Illuminate\Http\Request;

class TaskController extends Controller
{
    public function __construct(TaskService $taskService)
    {
		    // コンストラクタに渡してメンバ変数にセット
        $this->taskService = $taskService;
    }

    public function index()
    {
		    // サービスで定義したメソッドを呼び出す
        return $this->taskService->index();
    }
}
```

- `TaskService` をコンストラクタに渡してメンバ変数にセット
- 各メソッドでサービスで定義したメソッドを呼び出す

### Repositoryを作成

```php
//app/Repositories/TaskRepository.php

namespace App\Repositories;

use App\Interfaces\TaskInterface;
use App\Models\Task\Task;

class TaskRepository implements TaskInterface
{
    public function index()
    {
        return Task::all();
    }
}
```

- `TaskInterface` を元に具体的な処理を実装

### InterfaceとRepositoryを紐付ける

上記コマンドを実行

```php
php artisan make:provider RepositoryServiceProvider
```

コマンドを実行すると 

- `/app/Provider` ディレクトリに `RepositoryServiceProvider.php`ファイルが生成
- `/bootstrap/providers.php` に生成されたプロバイダクラスが読み込まれる

```php
// bootstrap/providers.php

return [
    App\Providers\AppServiceProvider::class,
    App\Providers\AuthServiceProvider::class,
    App\Providers\RepositoryServiceProvider::class, // 追加される
];
```

生成された `RepositoryServiceProvider.php`ファイルの `register` メソッドに追記する

```php
// app/ProviderRepositoryServiceProvider.php

namespace App\Providers;

use App\Interfaces\TaskInterface;
use App\Repositories\TaskRepository;
use Illuminate\Support\ServiceProvider;

class RepositoryServiceProvider extends ServiceProvider
{
    /**
     * Register services.
     */
    public function register(): void
    {
        // 追加（InterfaceとRepositoryを紐付け）
        $this->app->bind(TaskInterface::class, TaskRepository::class);
    }

    /**
     * Bootstrap services.
     */
    public function boot(): void
    {
        //
    }
}
```

一応オートロードしといたほうがいいかも

```php
composer dump-autoload
```

## 考察
- 仮にDBの保存先をMySQLからFirestoreへ変更になったとしても、レポジトリファイルを作成 + プロバイダでバインドするクラスを書き換えれば対応が可能になる
- ビジネスロジックやユースケースのコードを修正する必要がなくなる
- よって保守性・拡張性の高いコードになると感じた

## 参考
 [Laravel - The PHP Framework For Web Artisans](https://laravel.com/docs/11.x/providers)

[Laravelアプリケーションでリポジトリパターンを使う方法](https://www.twilio.com/ja-jp/blog/repository-pattern-in-laravel-application-jp)

[akippaで採用しているLaravelのデザインパターンのお話：後編｜村上 健一郎](https://note.com/akippa_murakami/n/n8a342ab86e09)


<h2 data-sourcepos="1:1-1:9">
<a href="#%E5%AE%9F%E8%A3%85"></a>実装</h2>
<h3 data-sourcepos="3:1-3:37">
<a href="#%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E6%88%90"></a>基本的なファイルを作成</h3>
<div class="code-frame" data-lang="bash" data-sourcepos="5:1-8:3"><div class="highlight"><pre><code># Model, Controller, Migration, Seederファイルを作成 
php artisan make:model [Model名] -crms
</code></pre></div></div>
<h3 data-sourcepos="10:1-10:22">
<a href="#interface%E3%82%92%E4%BD%9C%E6%88%90"></a>Interfaceを作成</h3>
<div class="code-frame" data-lang="php" data-sourcepos="12:1-25:3"><div class="highlight"><pre><code>// app/Interfaces/TaskInterface.php

namespace App\Interfaces;

interface TaskInterface
{
 public function index();
 public function store(array $data);
 public function show(string $id);
 public function update(string $id, array $data);
 public function destroy(string $id);
}
</code></pre></div></div>
<h3 data-sourcepos="27:1-27:20">
<a href="#service%E3%82%92%E4%BD%9C%E6%88%90"></a>Serviceを作成</h3>
<div class="code-frame" data-lang="php" data-sourcepos="29:1-50:3"><div class="highlight"><pre><code>// app/Services/TaskService.php

namespace App\Services;

use App\Interfaces\TaskInterface;

class TaskService
{
	// メンバ変数にセット
 public function __construct(TaskInterface $taskInterface)
 {
 $this-&gt;taskInterface = $taskInterface;
 }

 public function index()
 {
	 // インターフェースで定義したメソッドを呼び出す
 return $this-&gt;taskInterface-&gt;index();
 }
}
</code></pre></div></div>
<ul data-sourcepos="52:1-54:0">
<li data-sourcepos="52:1-52:81">
<code>TaskInterface</code> をコンストラクタに渡してメンバ変数にセット</li>
<li data-sourcepos="53:1-54:0">各メソッドでインターフェースで定義したメソッドを呼び出す</li>
</ul>
<h3 data-sourcepos="55:1-55:42">
<a href="#controller%E3%81%8B%E3%82%89service%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80"></a>ControllerからServiceを読み込む</h3>
<div class="code-frame" data-lang="php" data-sourcepos="57:1-81:3"><div class="highlight"><pre><code>// app/Http/Controllers/Task/TaskController.php

namespace App\Http\Controllers\Task;

use App\Http\Controllers\Controller;
use App\Models\Task\Task;
use App\Services\TaskService;
use Illuminate\Http\Request;

class TaskController extends Controller
{
 public function __construct(TaskService $taskService)
 {
		 // コンストラクタに渡してメンバ変数にセット
 $this-&gt;taskService = $taskService;
 }

 public function index()
 {
		 // サービスで定義したメソッドを呼び出す
 return $this-&gt;taskService-&gt;index();
 }
}
</code></pre></div></div>
<ul data-sourcepos="83:1-85:0">
<li data-sourcepos="83:1-83:79">
<code>TaskService</code> をコンストラクタに渡してメンバ変数にセット</li>
<li data-sourcepos="84:1-85:0">各メソッドでサービスで定義したメソッドを呼び出す</li>
</ul>
<h3 data-sourcepos="86:1-86:23">
<a href="#repository%E3%82%92%E4%BD%9C%E6%88%90"></a>Repositoryを作成</h3>
<div class="code-frame" data-lang="php" data-sourcepos="88:1-103:3"><div class="highlight"><pre><code>//app/Repositories/TaskRepository.php

namespace App\Repositories;

use App\Interfaces\TaskInterface;
use App\Models\Task\Task;

class TaskRepository implements TaskInterface
{
 public function index()
 {
 return Task::all();
 }
}
</code></pre></div></div>
<ul data-sourcepos="105:1-106:0">
<li data-sourcepos="105:1-106:0">
<code>TaskInterface</code> を元に具体的な処理を実装</li>
</ul>
<h3 data-sourcepos="107:1-107:41">
<a href="#interface%E3%81%A8repository%E3%82%92%E7%B4%90%E4%BB%98%E3%81%91%E3%82%8B"></a>InterfaceとRepositoryを紐付ける</h3>
上記コマンドを実行
<div class="code-frame" data-lang="php" data-sourcepos="111:1-113:3"><div class="highlight"><pre><code>php artisan make:provider RepositoryServiceProvider
</code></pre></div></div>
コマンドを実行すると
<ul data-sourcepos="117:1-119:0">
<li data-sourcepos="117:1-117:92">
<code>/app/Provider</code> ディレクトリに <code>RepositoryServiceProvider.php</code>ファイルが生成</li>
<li data-sourcepos="118:1-119:0">
<code>/bootstrap/providers.php</code> に生成されたプロバイダクラスが読み込まれる</li>
</ul>
<div class="code-frame" data-lang="php" data-sourcepos="120:1-128:3"><div class="highlight"><pre><code>// bootstrap/providers.php

return [
 App\Providers\AppServiceProvider::class,
 App\Providers\AuthServiceProvider::class,
 App\Providers\RepositoryServiceProvider::class, // 追加される
];
</code></pre></div></div>
生成された <code>RepositoryServiceProvider.php</code>ファイルの <code>register</code> メソッドに追記する
<div class="code-frame" data-lang="php" data-sourcepos="132:1-160:3"><div class="highlight"><pre><code>// app/ProviderRepositoryServiceProvider.php

namespace App\Providers;

use App\Interfaces\TaskInterface;
use App\Repositories\TaskRepository;
use Illuminate\Support\ServiceProvider;

class RepositoryServiceProvider extends ServiceProvider
{
 /**
 * Register services.
 */
 public function register(): void
 {
 // 追加（InterfaceとRepositoryを紐付け）
 $this-&gt;app-&gt;bind(TaskInterface::class, TaskRepository::class);
 }

 /**
 * Bootstrap services.
 */
 public function boot(): void
 {
 //
 }
}
</code></pre></div></div>
一応オートロードしといたほうがいいかも
<div class="code-frame" data-lang="php" data-sourcepos="164:1-166:3"><div class="highlight"><pre><code>composer dump-autoload
</code></pre></div></div>
<h2 data-sourcepos="168:1-168:9">
<a href="#%E8%80%83%E5%AF%9F"></a>考察</h2>
<ul data-sourcepos="169:1-172:0">
<li data-sourcepos="169:1-169:210">仮にDBの保存先をMySQLからFirestoreへ変更になったとしても、レポジトリファイルを作成 + プロバイダでバインドするクラスを書き換えれば対応が可能になる</li>
<li data-sourcepos="170:1-170:95">ビジネスロジックやユースケースのコードを修正する必要がなくなる</li>
<li data-sourcepos="171:1-172:0">よって保守性・拡張性の高いコードになると感じた</li>
</ul>
<h2 data-sourcepos="173:1-173:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<a href="https://laravel.com/docs/11.x/providers" rel="nofollow noopener" target="_blank">Laravel - The PHP Framework For Web Artisans</a>
<a href="https://www.twilio.com/ja-jp/blog/repository-pattern-in-laravel-application-jp" rel="nofollow noopener" target="_blank">Laravelアプリケーションでリポジトリパターンを使う方法</a>
<a href="https://note.com/akippa_murakami/n/n8a342ab86e09" rel="nofollow noopener" target="_blank">akippaで採用しているLaravelのデザインパターンのお話：後編｜村上 健一郎</a>

Laravelでリポジトリーパターンを使う

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

# DNS誕生の背景
## DNSが誕生する前
- IPアドレスは1箇所で管理していたが、接続する機器が増えすぎたため分散管理するようになった（ただのテキストファイルでIPとドメインを管理）
- インターネット利用者はテキストファイルをダウンロードして使っていた
- インターネットを始める場合は、管理局（レジストリ）に申請しテキストファイルに追加してもらう必要があった
- 色々めんどくさいので**ドメインを階層化し管理を委任する**ことで現在のDNSシステムとなった

## 分散管理のメリット
- 管理者の負担軽減（
  - `.jp` なら `.jp` だけを管理すれば良い、 `example.jp` は委任して他に任せる
- 拡張性
  - `example.jp`は `.jp`から委任されているので理範囲内で独自にルールを決めれる

# リゾルバについて
## スタブリゾルバ
- デバイスの中にあるもの（DNSクライアントともいう）
## フルリゾルバ
- DNSサーバーに問い合わせを行い取得したIPをクライアントに返却する
- 名前解決したIPをキャッシュしておく
- キャッシュDNSサーバーと呼ばれることもある


# キャッシュについて
キャッシュは２種類ある

## キャッシュ
- 名前解決したドメインをIPを保持しておき、シドリクエストが来た際はキャッシュをレスポンスする

## ネガティブキャッシュ
- 存在しないIPにだった場合その情報もキャッシュしておく
  - これがないとブラウザをリロードしたときに再度DNSサーバーへ名前解決のリクエストを送信することになる

# サーバーは複数設置する
同じゾーン情報を持つサーバーを複数立てておくため**ゾーン転送**を行う

## プライマリサーバー・セカンダリサーバー
ゾーン転送したサーバーをセカンダリーサーバーという
![](https://storage.googleapis.com/zenn-user-upload/6bb69f960480-20240220.png)

# レコードについて

## SOAレコード
- ゾーン頂点でSOAレコードが必要
  - `.jp` から委任された `exmaple.jp` は `exmaple.jp` のゾーン頂点
- ゾーン転送にも必要

## NSレコード
- ゾーンの親子関係を示すもの
- ゾーンを管理するサーバーのホスト名を設定する（ `exmaple.jp` であれば `exmaple.jp` を設定する）

## TXTレコード
- 任意の文字を設定できるので、特定のフォーマットを入力すると、**ドメインの所有権の確認、メールのセキュリティの確保、迷惑メールやフィッシングの防止**を行える

###  SPFとは？
- SPFとは送信元の身元を確認するためのドメイン認証技術
-ドメインが迷惑メールの送信に使用されることを防ぐ目的がある
- 例えば、ドメイン「XXX.co.jp」のIPアドレス「192.168.10.1」から送信されたメールのみを認証させたいときは、TXTレコードに追加する
```jsx
XXX.co.jp. IN TXT "v=spf1  +ip4:192.168.10.1 –all"
```

## CNAMEレコード
- ドメイン名のエイリアス（別名）を指定するために使われる
- 以下の場合、 `www.example.com` の問い合わせに対し、`test.example.com` の名前解決を行う

```jsx
www.example.com IN CNAME test.example.com
```


<h1 data-sourcepos="1:1-1:20">
<a href="#dns%E8%AA%95%E7%94%9F%E3%81%AE%E8%83%8C%E6%99%AF"></a>DNS誕生の背景</h1>
<h2 data-sourcepos="2:1-2:24">
<a href="#dns%E3%81%8C%E8%AA%95%E7%94%9F%E3%81%99%E3%82%8B%E5%89%8D"></a>DNSが誕生する前</h2>
<ul data-sourcepos="3:1-7:0">
<li data-sourcepos="3:1-3:199">IPアドレスは1箇所で管理していたが、接続する機器が増えすぎたため分散管理するようになった（ただのテキストファイルでIPとドメインを管理）</li>
<li data-sourcepos="4:1-4:101">インターネット利用者はテキストファイルをダウンロードして使っていた</li>
<li data-sourcepos="5:1-5:155">インターネットを始める場合は、管理局（レジストリ）に申請しテキストファイルに追加してもらう必要があった</li>
<li data-sourcepos="6:1-7:0">色々めんどくさいのでドメインを階層化し管理を委任することで現在のDNSシステムとなった</li>
</ul>
<h2 data-sourcepos="8:1-8:30">
<a href="#%E5%88%86%E6%95%A3%E7%AE%A1%E7%90%86%E3%81%AE%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88"></a>分散管理のメリット</h2>
<ul data-sourcepos="9:1-13:0">
<li data-sourcepos="9:1-10:100">管理者の負担軽減（
<ul data-sourcepos="10:3-10:100">
<li data-sourcepos="10:3-10:100">
<code>.jp</code> なら <code>.jp</code> だけを管理すれば良い、 <code>example.jp</code> は委任して他に任せる</li>
</ul>
</li>
<li data-sourcepos="11:1-13:0">拡張性
<ul data-sourcepos="12:3-13:0">
<li data-sourcepos="12:3-13:0">
<code>example.jp</code>は <code>.jp</code>から委任されているので理範囲内で独自にルールを決めれる</li>
</ul>
</li>
</ul>
<h1 data-sourcepos="14:1-14:26">
<a href="#%E3%83%AA%E3%82%BE%E3%83%AB%E3%83%90%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"></a>リゾルバについて</h1>
<h2 data-sourcepos="15:1-15:24">
<a href="#%E3%82%B9%E3%82%BF%E3%83%96%E3%83%AA%E3%82%BE%E3%83%AB%E3%83%90"></a>スタブリゾルバ</h2>
<ul data-sourcepos="16:1-16:74">
<li data-sourcepos="16:1-16:74">デバイスの中にあるもの（DNSクライアントともいう）</li>
</ul>
<h2 data-sourcepos="17:1-17:21">
<a href="#%E3%83%95%E3%83%AB%E3%83%AA%E3%82%BE%E3%83%AB%E3%83%90"></a>フルリゾルバ</h2>
<ul data-sourcepos="18:1-22:0">
<li data-sourcepos="18:1-18:94">DNSサーバーに問い合わせを行い取得したIPをクライアントに返却する</li>
<li data-sourcepos="19:1-19:52">名前解決したIPをキャッシュしておく</li>
<li data-sourcepos="20:1-22:0">キャッシュDNSサーバーと呼ばれることもある</li>
</ul>
<h1 data-sourcepos="23:1-23:29">
<a href="#%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"></a>キャッシュについて</h1>
キャッシュは２種類ある
<h2 data-sourcepos="26:1-26:18">
<a href="#%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5"></a>キャッシュ</h2>
<ul data-sourcepos="27:1-28:0">
<li data-sourcepos="27:1-28:0">名前解決したドメインをIPを保持しておき、シドリクエストが来た際はキャッシュをレスポンスする</li>
</ul>
<h2 data-sourcepos="29:1-29:33">
<a href="#%E3%83%8D%E3%82%AC%E3%83%86%E3%82%A3%E3%83%96%E3%82%AD%E3%83%A3%E3%83%83%E3%82%B7%E3%83%A5"></a>ネガティブキャッシュ</h2>
<ul data-sourcepos="30:1-32:0">
<li data-sourcepos="30:1-32:0">存在しないIPにだった場合その情報もキャッシュしておく
<ul data-sourcepos="31:3-32:0">
<li data-sourcepos="31:3-32:0">これがないとブラウザをリロードしたときに再度DNSサーバーへ名前解決のリクエストを送信することになる</li>
</ul>
</li>
</ul>
<h1 data-sourcepos="33:1-33:35">
<a href="#%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%81%AF%E8%A4%87%E6%95%B0%E8%A8%AD%E7%BD%AE%E3%81%99%E3%82%8B"></a>サーバーは複数設置する</h1>
同じゾーン情報を持つサーバーを複数立てておくためゾーン転送を行う
<h2 data-sourcepos="36:1-36:60">
<a href="#%E3%83%97%E3%83%A9%E3%82%A4%E3%83%9E%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%82%BB%E3%82%AB%E3%83%B3%E3%83%80%E3%83%AA%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC"></a>プライマリサーバー・セカンダリサーバー</h2>
ゾーン転送したサーバーをセカンダリーサーバーという 
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F6bb69f960480-20240220.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=16147a6132684525dbe0b4f60a743cee" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F6bb69f960480-20240220.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=16147a6132684525dbe0b4f60a743cee" alt="" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F6bb69f960480-20240220.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=cbfb6d9c070c3cda66a0eb31605ac6e8 1x" data-canonical-src="https://storage.googleapis.com/zenn-user-upload/6bb69f960480-20240220.png" loading="lazy"></a>
<h1 data-sourcepos="40:1-40:26">
<a href="#%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6"></a>レコードについて</h1>
<h2 data-sourcepos="42:1-42:18">
<a href="#soa%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89"></a>SOAレコード</h2>
<ul data-sourcepos="43:1-46:0">
<li data-sourcepos="43:1-44:80">ゾーン頂点でSOAレコードが必要
<ul data-sourcepos="44:3-44:80">
<li data-sourcepos="44:3-44:80">
<code>.jp</code> から委任された <code>exmaple.jp</code> は <code>exmaple.jp</code> のゾーン頂点</li>
</ul>
</li>
<li data-sourcepos="45:1-46:0">ゾーン転送にも必要</li>
</ul>
<h2 data-sourcepos="47:1-47:17">
<a href="#ns%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89"></a>NSレコード</h2>
<ul data-sourcepos="48:1-50:0">
<li data-sourcepos="48:1-48:41">ゾーンの親子関係を示すもの</li>
<li data-sourcepos="49:1-50:0">ゾーンを管理するサーバーのホスト名を設定する（ <code>exmaple.jp</code> であれば <code>exmaple.jp</code> を設定する）</li>
</ul>
<h2 data-sourcepos="51:1-51:18">
<a href="#txt%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89"></a>TXTレコード</h2>
<ul data-sourcepos="52:1-53:0">
<li data-sourcepos="52:1-53:0">任意の文字を設定できるので、特定のフォーマットを入力すると、ドメインの所有権の確認、メールのセキュリティの確保、迷惑メールやフィッシングの防止を行える</li>
</ul>
<h3 data-sourcepos="54:1-54:17">
<a href="#spf%E3%81%A8%E3%81%AF"></a>SPFとは？</h3>
<ul data-sourcepos="55:1-57:175">
<li data-sourcepos="55:1-56:88">SPFとは送信元の身元を確認するためのドメイン認証技術 
-ドメインが迷惑メールの送信に使用されることを防ぐ目的がある</li>
<li data-sourcepos="57:1-57:175">例えば、ドメイン「XXX.co.jp」のIPアドレス「192.168.10.1」から送信されたメールのみを認証させたいときは、TXTレコードに追加する</li>
</ul>
<div class="code-frame" data-lang="jsx" data-sourcepos="58:1-60:3"><div class="highlight"><pre><code>XXX.co.jp. IN TXT "v=spf1 +ip4:192.168.10.1 –all"
</code></pre></div></div>
<h2 data-sourcepos="62:1-62:20">
<a href="#cname%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89"></a>CNAMEレコード</h2>
<ul data-sourcepos="63:1-65:0">
<li data-sourcepos="63:1-63:83">ドメイン名のエイリアス（別名）を指定するために使われる</li>
<li data-sourcepos="64:1-65:0">以下の場合、 <code>www.example.com</code> の問い合わせに対し、<code>test.example.com</code> の名前解決を行う</li>
</ul>
<div class="code-frame" data-lang="jsx" data-sourcepos="66:1-68:3"><div class="highlight"><pre><code>www.example.com IN CNAME test.example.com
</code></pre></div></div>

DNSについて

## Core Web Vitals
### Core Web Vitalsとは
- ユーザー体験を測定する一連の指標
- 良いユーザー体験を提供するためのGoogleが取り組んでいるガイダンス
- Core Web VitalsはSEOにも影響する


### **LCP - Largest Contentful Paint**
ビューポート内に表示される一番大きいコンテンツ（画像、テキストロック、動画）のレンダリングにどれだけ時間がかかるか

### **CLS - Cumulative Layout Shift**
レイアウトのズレや崩れを数値化したもの
レイアウトのズレや崩れとして・・・
- 突然バナーが出現して推したいボタンが押せない
- 画像に `height` を設定していない場合、画像が表示されると画像の高さ分、レイアウトが下にずれ、意図しないボタンを押してしまう

### **FID - First Input Delay**
ユーザーが最初にページを操作（リンクのクリック、ボタンのタップなど）してから、イベント ハンドラの処理を開始するまでの時間

## レンダリングパターン
### なぜCSRが生まれたか？
- サーバーでデータを取得してそれをサーバー上でレンダリングし、それをブラウザに配信していた（PHPやPerl）
- ブラウザはサーバーで生成されたHTMLを表示するだけで、インタラクティブではなかった
- JavaScriptの改善とブラウザ性能が向上したことで、最小限のHTMLとJSでクライアント側で全て行うようになる
- WebがよりインタラクティブになったことでSPAが広まった

### CSRの問題点
WEBでできることが増えすぎたことで、Javascriptのバンドルサイズが肥大化し、ユーザーの環境（デバイスや通信環境）によっては表示が遅くなった

:::note warn
環境によって初回のバンドルファイルのダウンロードに時間がかかりUXが最悪（初回表示速度はバンドルサイズに依存する）
:::

:::note info
どのユーザーにも同じように同じようにコンテンツを配信するには、SSRに戻すのが良いよねってなった
:::

### SSRでCSRの問題を解決する
#### SSRの流れ

1. クライアントからリククエスト
2. リクエストを受け取ったサーバーは文字列のHTMLを生成し、クライアントに返却
3. 受け取った文字列HTMLにイベントハンドラをアタッチして、生きた仮想DOMとして再開させる（ハイドレーション）

#### SSRにするとCSRに比べてどうなるのか？
- 初回のレスポンスはサーバーでレンダリングするので少し遅くなる
- 最初の要素が表示される時間は多少早くなる
- 大きい要素の表示も早くなる
- FIDは逆に悪くなってしまう可能性がある

## 参考

https://developers.google.com/search/docs/appearance/core-web-vitals?hl=ja

https://www.youtube.com/watch?v=pqyyGdtok4Q


<h2 data-sourcepos="1:1-1:18">
<a href="#core-web-vitals"></a>Core Web Vitals</h2>
<h3 data-sourcepos="2:1-2:25">
<a href="#core-web-vitals%E3%81%A8%E3%81%AF"></a>Core Web Vitalsとは</h3>
<ul data-sourcepos="3:1-7:0">
<li data-sourcepos="3:1-3:50">ユーザー体験を測定する一連の指標</li>
<li data-sourcepos="4:1-4:95">良いユーザー体験を提供するためのGoogleが取り組んでいるガイダンス</li>
<li data-sourcepos="5:1-7:0">Core Web VitalsはSEOにも影響する</li>
</ul>
<h3 data-sourcepos="8:1-8:38">
<a href="#lcp---largest-contentful-paint"></a>LCP - Largest Contentful Paint
</h3>
ビューポート内に表示される一番大きいコンテンツ（画像、テキストロック、動画）のレンダリングにどれだけ時間がかかるか
<h3 data-sourcepos="11:1-11:37">
<a href="#cls---cumulative-layout-shift"></a>CLS - Cumulative Layout Shift
</h3>
レイアウトのズレや崩れを数値化したもの 
レイアウトのズレや崩れとして・・・
<ul data-sourcepos="14:1-16:0">
<li data-sourcepos="14:1-14:68">突然バナーが出現して推したいボタンが押せない</li>
<li data-sourcepos="15:1-16:0">画像に <code>height</code> を設定していない場合、画像が表示されると画像の高さ分、レイアウトが下にずれ、意図しないボタンを押してしまう</li>
</ul>
<h3 data-sourcepos="17:1-17:31">
<a href="#fid---first-input-delay"></a>FID - First Input Delay
</h3>
ユーザーが最初にページを操作（リンクのクリック、ボタンのタップなど）してから、イベント ハンドラの処理を開始するまでの時間
<h2 data-sourcepos="20:1-20:33">
<a href="#%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3"></a>レンダリングパターン</h2>
<h3 data-sourcepos="21:1-21:34">
<a href="#%E3%81%AA%E3%81%9Ccsr%E3%81%8C%E7%94%9F%E3%81%BE%E3%82%8C%E3%81%9F%E3%81%8B"></a>なぜCSRが生まれたか？</h3>
<ul data-sourcepos="22:1-26:0">
<li data-sourcepos="22:1-22:150">サーバーでデータを取得してそれをサーバー上でレンダリングし、それをブラウザに配信していた（PHPやPerl）</li>
<li data-sourcepos="23:1-23:120">ブラウザはサーバーで生成されたHTMLを表示するだけで、インタラクティブではなかった</li>
<li data-sourcepos="24:1-24:144">JavaScriptの改善とブラウザ性能が向上したことで、最小限のHTMLとJSでクライアント側で全て行うようになる</li>
<li data-sourcepos="25:1-26:0">WebがよりインタラクティブになったことでSPAが広まった</li>
</ul>
<h3 data-sourcepos="27:1-27:19">
<a href="#csr%E3%81%AE%E5%95%8F%E9%A1%8C%E7%82%B9"></a>CSRの問題点</h3>
WEBでできることが増えすぎたことで、Javascriptのバンドルサイズが肥大化し、ユーザーの環境（デバイスや通信環境）によっては表示が遅くなった
<div data-sourcepos="30:1-32:3" class="note warn">
<div>
環境によって初回のバンドルファイルのダウンロードに時間がかかりUXが最悪（初回表示速度はバンドルサイズに依存する）
</div>
</div>
<div data-sourcepos="34:1-36:3" class="note info">
<div>
どのユーザーにも同じように同じようにコンテンツを配信するには、SSRに戻すのが良いよねってなった
</div>
</div>
<h3 data-sourcepos="38:1-38:37">
<a href="#ssr%E3%81%A7csr%E3%81%AE%E5%95%8F%E9%A1%8C%E3%82%92%E8%A7%A3%E6%B1%BA%E3%81%99%E3%82%8B"></a>SSRでCSRの問題を解決する</h3>
<h4 data-sourcepos="39:1-39:17">
<a href="#ssr%E3%81%AE%E6%B5%81%E3%82%8C"></a>SSRの流れ</h4>
<ol data-sourcepos="41:1-44:0">
<li data-sourcepos="41:1-41:45">クライアントからリククエスト</li>
<li data-sourcepos="42:1-42:109">リクエストを受け取ったサーバーは文字列のHTMLを生成し、クライアントに返却</li>
<li data-sourcepos="43:1-44:0">受け取った文字列HTMLにイベントハンドラをアタッチして、生きた仮想DOMとして再開させる（ハイドレーション）</li>
</ol>
<h4 data-sourcepos="45:1-45:56">
<a href="#ssr%E3%81%AB%E3%81%99%E3%82%8B%E3%81%A8csr%E3%81%AB%E6%AF%94%E3%81%B9%E3%81%A6%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8B%E3%81%AE%E3%81%8B"></a>SSRにするとCSRに比べてどうなるのか？</h4>
<ul data-sourcepos="46:1-50:0">
<li data-sourcepos="46:1-46:92">初回のレスポンスはサーバーでレンダリングするので少し遅くなる</li>
<li data-sourcepos="47:1-47:62">最初の要素が表示される時間は多少早くなる</li>
<li data-sourcepos="48:1-48:41">大きい要素の表示も早くなる</li>
<li data-sourcepos="49:1-50:0">FIDは逆に悪くなってしまう可能性がある</li>
</ul>
<h2 data-sourcepos="51:1-51:9">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h2>
<iframe id="qiita-embed-content__51233b93d9dd9371c882b5aead8e7335" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__51233b93d9dd9371c882b5aead8e7335" data-content="https%3A%2F%2Fdevelopers.google.com%2Fsearch%2Fdocs%2Fappearance%2Fcore-web-vitals%3Fhl%3Dja" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__cb65be4e7f6f31dc34b1064fc8964689" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__cb65be4e7f6f31dc34b1064fc8964689" data-content="https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DpqyyGdtok4Q" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

CSR・SSR・SSGとCore Web Vitals

## ブラウザレンダリングの流れ

1. Loading - リソース読み込み（Download, Parse）
2. Scripting - Javascript実行
3. Rendering - レイアウトツリー構築（Calculate Style, Layout）
4. Painting - レンダリング結果の描画（Paint, Rasterize, Composite Layers）

![https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png](https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png)

引用: https://qiita.com/gasheeee/items/267f11314c161392a871

## 1. Loading - リソース読み込み

このフェーズの主な役割は

- リソースのダウンロード（Download）
- リソースのパース（Parse）

### Download

以下のリソースをサーバーからダウンロード

- HTMLファイル
- CSSファイル
- JavaScriptファイル
- 画像ファイル（JPEG、PNG、GIF、SVG）

### Parse

HTMLをDOMツリー、CSSをCSSOMツリーに変換（レンダリングエンジンが解析できる形式に変換）

### HTML読み込み

以下の工程を経てDOMツリーに変換される

1. HTMLを解析してトークンをリスト化
2. トークンからツリーデータを作成
3. ツリーデータにあるJavaScriptを実行しつつDOMツリーの構築

:::note info
JavaScriptを実行中はDOMツリーの構築はストップする
:::

## 2. Scripting - Javascript実行

レンダリングエンジンはJavascriptコードを JavaScript エンジンに引き渡して実行する

1. Javascriptコードを解析しトークンを生成
2. トークンを解析しASTデータ（抽象構文木）を作成
3. ツリーデータを実行可能な状態にする
4. 仮想マシンやCPUで実行される

:::note info
ESlintやPrettier、テストのカバレッジの取得でASTが使われている
:::

### 参考

https://zenn.dev/oreo2990/articles/5b56230ba2d7a1

https://zenn.dev/antez/books/568dd4d86562a1/viewer/09848c

https://engineering.mercari.com/blog/entry/20220128-3a0922eaa4/

## 3. Rendering - レイアウトツリー構築

Javascriptの実行が終わるとスタイルの計算とレイアウトが行われる

### Calculate Style

- 構築したDOM要素にどのCSSが適用されるか計算
 - この時にCSSOMツリー全てを参照し、全てのDOM要素に対してCSSセレクタのマッチングを総当たりで行う
- DOM要素にどのCSSが適用されるかが分かれば、CSSの詳細度でどのCSSが適用されるか判別

### CSSセレクタのマッチング

- CSSセレクタのマッチングは総当たりで行う（DOMが100個、CSSが50個ある場合には 100 * 50 = 5000回のマッチング処理が走る）
- マッチングは右から左へ行われる
 
```css
/* 1. DOM要素のclass属性にbuttonが含まれている */
/* 2. その親要素のclass属性にcontainerが含まれている */
/* 3. その親要素のDOM要素名がbodyである */
body .container > .button {
 color: red;
}

```
 
- 詳細度は[セレクターの重み分類](https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E9%87%8D%E3%81%BF%E5%88%86%E9%A1%9E)で判定される（`1-0-0`, `0-1-0` , `0-0-1`のような形式）

### Layout

DOM要素に当たるCSSプロパティを判別した後、レンダリングエンジンはDOMツリー内のすべてのノードの視覚的なレイアウト情報の計算する。
レイアウト情報とは、

- 要素の大きさ
- 要素のマージン
- 要素のパディング
- 要素の位置
- 要素のz軸の位置

## 4. Painting - レンダリング結果の描画

### Paint

- グラフィックエンジンに向けた命令を生成

### Rasterize

- 生成された命令を用いて、レンダリングツリー内の各ノードをレイヤー単位でピクセルに変換していく

:::note info
レイヤーという単位でピクセルに描画するのは、再レンダリングする場合、すでに描画が終わったレイヤーを再利用することで、素早く再レンダリングするため
:::

</aside>

ブラウザのウィンドウをスクロールするときには、スクロール分だけコンテンツの表示される位置を移動して描画を更新する必要がある
しかし、このとき更新しなければならないのはコンテンツの表示の位置だけで、コンテンツの描画そのものは変更する必要はないため、以前描画したレイヤーがこのとき再利用される

### Composite Layers

- ピクセルにしたレイヤーを合成してレンダリング結果を生成
- 合成処理はCPUで行われるが、3DなどはGPUで処理される（z軸の処理はGPUの方が早いため）

以上の工程を経て、コンテンツが表示される

<h2 data-sourcepos="1:1-1:42">
<a href="#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AE%E6%B5%81%E3%82%8C"></a>ブラウザレンダリングの流れ</h2>
<ol data-sourcepos="3:1-7:0">
<li data-sourcepos="3:1-3:58">Loading - リソース読み込み（Download, Parse）</li>
<li data-sourcepos="4:1-4:31">Scripting - Javascript実行</li>
<li data-sourcepos="5:1-5:74">Rendering - レイアウトツリー構築（Calculate Style, Layout）</li>
<li data-sourcepos="6:1-7:0">Painting - レンダリング結果の描画（Paint, Rasterize, Composite Layers）</li>
</ol>
<a href="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F3d9507fc80ef-20240405.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8536b21d7b9805e4eb60324909a358c1" target="_blank" rel="nofollow noopener"><img src="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F3d9507fc80ef-20240405.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;s=8536b21d7b9805e4eb60324909a358c1" alt="https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png" srcset="https://qiita-user-contents.imgix.net/https%3A%2F%2Fstorage.googleapis.com%2Fzenn-user-upload%2F3d9507fc80ef-20240405.png?ixlib=rb-4.0.0&amp;auto=format&amp;gif-q=60&amp;q=75&amp;w=1400&amp;fit=max&amp;s=a248cae30150b05f0dc1401f5095d9c8 1x" data-canonical-src="https://storage.googleapis.com/zenn-user-upload/3d9507fc80ef-20240405.png" loading="lazy"></a>
引用: <a href="https://qiita.com/gasheeee/items/267f11314c161392a871" class="autolink" id="reference-b68a86770193d26156e9">https://qiita.com/gasheeee/items/267f11314c161392a871</a>
<h2 data-sourcepos="12:1-12:40">
<a href="#1-loading---%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF"></a>1. Loading - リソース読み込み</h2>
このフェーズの主な役割は
<ul data-sourcepos="16:1-18:0">
<li data-sourcepos="16:1-16:49">リソースのダウンロード（Download）</li>
<li data-sourcepos="17:1-18:0">リソースのパース（Parse）</li>
</ul>
<h3 data-sourcepos="19:1-19:12">
<a href="#download"></a>Download</h3>
以下のリソースをサーバーからダウンロード
<ul data-sourcepos="23:1-27:0">
<li data-sourcepos="23:1-23:18">HTMLファイル</li>
<li data-sourcepos="24:1-24:17">CSSファイル</li>
<li data-sourcepos="25:1-25:24">JavaScriptファイル</li>
<li data-sourcepos="26:1-27:0">画像ファイル（JPEG、PNG、GIF、SVG）</li>
</ul>
<h3 data-sourcepos="28:1-28:9">
<a href="#parse"></a>Parse</h3>
HTMLをDOMツリー、CSSをCSSOMツリーに変換（レンダリングエンジンが解析できる形式に変換）
<h3 data-sourcepos="32:1-32:20">
<a href="#html%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF"></a>HTML読み込み</h3>
以下の工程を経てDOMツリーに変換される
<ol data-sourcepos="36:1-39:0">
<li data-sourcepos="36:1-36:49">HTMLを解析してトークンをリスト化</li>
<li data-sourcepos="37:1-37:48">トークンからツリーデータを作成</li>
<li data-sourcepos="38:1-39:0">ツリーデータにあるJavaScriptを実行しつつDOMツリーの構築</li>
</ol>
<div data-sourcepos="40:1-42:3" class="note info">
<div>
JavaScriptを実行中はDOMツリーの構築はストップする
</div>
</div>
<h2 data-sourcepos="44:1-44:34">
<a href="#2-scripting---javascript%E5%AE%9F%E8%A1%8C"></a>2. Scripting - Javascript実行</h2>
レンダリングエンジンはJavascriptコードを JavaScript エンジンに引き渡して実行する
<ol data-sourcepos="48:1-52:0">
<li data-sourcepos="48:1-48:55">Javascriptコードを解析しトークンを生成</li>
<li data-sourcepos="49:1-49:69">トークンを解析しASTデータ（抽象構文木）を作成</li>
<li data-sourcepos="50:1-50:54">ツリーデータを実行可能な状態にする</li>
<li data-sourcepos="51:1-52:0">仮想マシンやCPUで実行される</li>
</ol>
<div data-sourcepos="53:1-55:3" class="note info">
<div>
ESlintやPrettier、テストのカバレッジの取得でASTが使われている
</div>
</div>
<h3 data-sourcepos="57:1-57:10">
<a href="#%E5%8F%82%E8%80%83"></a>参考</h3>
<iframe id="qiita-embed-content__48e2bc5f037ad1e9f3de9260e5abe475" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__48e2bc5f037ad1e9f3de9260e5abe475" data-content="https%3A%2F%2Fzenn.dev%2Foreo2990%2Farticles%2F5b56230ba2d7a1" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__cf1c48087f0521e82f1e7791cae390de" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__cf1c48087f0521e82f1e7791cae390de" data-content="https%3A%2F%2Fzenn.dev%2Fantez%2Fbooks%2F568dd4d86562a1%2Fviewer%2F09848c" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<iframe id="qiita-embed-content__bd2f5ccc7b1cd8db723578ff669e0d4d" src="https://qiita.com/embed-contents/link-card#qiita-embed-content__bd2f5ccc7b1cd8db723578ff669e0d4d" data-content="https%3A%2F%2Fengineering.mercari.com%2Fblog%2Fentry%2F20220128-3a0922eaa4%2F" frameborder="0" scrolling="no" loading="lazy" style="width:100%;" height="29">
</iframe>

<h2 data-sourcepos="65:1-65:48">
<a href="#3-rendering---%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88%E3%83%84%E3%83%AA%E3%83%BC%E6%A7%8B%E7%AF%89"></a>3. Rendering - レイアウトツリー構築</h2>
Javascriptの実行が終わるとスタイルの計算とレイアウトが行われる
<h3 data-sourcepos="69:1-69:19">
<a href="#calculate-style"></a>Calculate Style</h3>
<ul data-sourcepos="71:1-74:0">
<li data-sourcepos="71:1-72:140">構築したDOM要素にどのCSSが適用されるか計算
<ul data-sourcepos="72:5-72:140">
<li data-sourcepos="72:5-72:140">この時にCSSOMツリー全てを参照し、全てのDOM要素に対してCSSセレクタのマッチングを総当たりで行う</li>
</ul>
</li>
<li data-sourcepos="73:1-74:0">DOM要素にどのCSSが適用されるかが分かれば、CSSの詳細度でどのCSSが適用されるか判別</li>
</ul>
<h3 data-sourcepos="75:1-75:37">
<a href="#css%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%81%AE%E3%83%9E%E3%83%83%E3%83%81%E3%83%B3%E3%82%B0"></a>CSSセレクタのマッチング</h3>
<ul data-sourcepos="77:1-79:4">
<li data-sourcepos="77:1-77:161">CSSセレクタのマッチングは総当たりで行う（DOMが100個、CSSが50個ある場合には 100 * 50 = 5000回のマッチング処理が走る）</li>
<li data-sourcepos="78:1-79:4">マッチングは右から左へ行われる</li>
</ul>
<div class="code-frame" data-lang="css" data-sourcepos="80:1-88:3"><div class="highlight"><pre><code>/* 1. DOM要素のclass属性にbuttonが含まれている */
/* 2. その親要素のclass属性にcontainerが含まれている */
/* 3. その親要素のDOM要素名がbodyである */
body .container &gt; .button {
 color: red;
}

</code></pre></div></div>
<ul data-sourcepos="90:1-91:0">
<li data-sourcepos="90:1-91:0">詳細度は<a href="https://developer.mozilla.org/ja/docs/Web/CSS/Specificity#%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF%E3%83%BC%E3%81%AE%E9%87%8D%E3%81%BF%E5%88%86%E9%A1%9E" rel="nofollow noopener" target="_blank">セレクターの重み分類</a>で判定される（<code>1-0-0</code>, <code>0-1-0</code> , <code>0-0-1</code>のような形式）</li>
</ul>
<h3 data-sourcepos="92:1-92:10">
<a href="#layout"></a>Layout</h3>
DOM要素に当たるCSSプロパティを判別した後、レンダリングエンジンはDOMツリー内のすべてのノードの視覚的なレイアウト情報の計算する。 
レイアウト情報とは、
<ul data-sourcepos="97:1-102:0">
<li data-sourcepos="97:1-97:20">要素の大きさ</li>
<li data-sourcepos="98:1-98:23">要素のマージン</li>
<li data-sourcepos="99:1-99:26">要素のパディング</li>
<li data-sourcepos="100:1-100:17">要素の位置</li>
<li data-sourcepos="101:1-102:0">要素のz軸の位置</li>
</ul>
<h2 data-sourcepos="103:1-103:50">
<a href="#4-painting---%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E7%B5%90%E6%9E%9C%E3%81%AE%E6%8F%8F%E7%94%BB"></a>4. Painting - レンダリング結果の描画</h2>
<h3 data-sourcepos="105:1-105:9">
<a href="#paint"></a>Paint</h3>
<ul data-sourcepos="107:1-108:0">
<li data-sourcepos="107:1-108:0">グラフィックエンジンに向けた命令を生成</li>
</ul>
<h3 data-sourcepos="109:1-109:13">
<a href="#rasterize"></a>Rasterize</h3>
<ul data-sourcepos="111:1-112:0">
<li data-sourcepos="111:1-112:0">生成された命令を用いて、レンダリングツリー内の各ノードをレイヤー単位でピクセルに変換していく</li>
</ul>
<div data-sourcepos="113:1-115:3" class="note info">
<div>
レイヤーという単位でピクセルに描画するのは、再レンダリングする場合、すでに描画が終わったレイヤーを再利用することで、素早く再レンダリングするため
</div>
</div>

ブラウザのウィンドウをスクロールするときには、スクロール分だけコンテンツの表示される位置を移動して描画を更新する必要がある 
しかし、このとき更新しなければならないのはコンテンツの表示の位置だけで、コンテンツの描画そのものは変更する必要はないため、以前描画したレイヤーがこのとき再利用される
<h3 data-sourcepos="122:1-122:20">
<a href="#composite-layers"></a>Composite Layers</h3>
<ul data-sourcepos="124:1-126:0">
<li data-sourcepos="124:1-124:83">ピクセルにしたレイヤーを合成してレンダリング結果を生成</li>
<li data-sourcepos="125:1-126:0">合成処理はCPUで行われるが、3DなどはGPUで処理される（z軸の処理はGPUの方が早いため）</li>
</ul>
以上の工程を経て、コンテンツが表示される

ブラウザレンダリング流れ

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

# 環境

- 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://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" 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" 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" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/73328720-e3a9-93fb-01dc-ba89eb3c30da.png" 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://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" 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" 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" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/658499c7-ca2d-8717-5fc3-34f0f2a07dfc.png" 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://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" 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" 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" data-canonical-src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2638572/8146598f-49d8-b1b5-4050-c3bb637aac11.png" 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>

Qiita