TypeScript 環境構築

TypeScriptのページ遷移を理解する

TypeScript ページ遷移

Reactを用いたフロントエンドの実装を習得する

React勉強会

GoとGraphQLサーバーの実装を習得する

インターフェース勉強会

# TypeScriptの型について TypeScriptの型について理解する。 ## 目的 型についての理解を理解を深め、さまざまなプロダクトで活用できるようにするため。

TypeScript 型について

TypeScriptの変数宣言について理解する。

TypeScript 変数宣言

# Linuxの基本を知る

## Linuxとは

Linuxとは、WindowsやMacと同じOS（オペレーティングシステム）の一種です。OSとはコンピューターを動かすための基本的なソフトウェアです。

LinuxはUNIXというOSに基づいて作られており，同じくUNIXベースのMacOSはコマンドやファイルシステムに似ている部分が多くあります。

Linuxは他のWindowsやMacとは異なり，オープンソースで誰でも自由に利用・改良できます。そのため，様々な種類（ディストリビューション）があります。有名なものに，Debian，Ubuntu，CentOSなどがあります。

## Ubuntuの特徴

UbuntuはDebianをベースに作られたLinuxディストリビューションです。

UbuntuはDebianと同じパッケージ管理システム`apt`を採用しているため，Debianパッケージ（アプリ）をそのまま利用することが可能です。

以下はパッケージ管理システム`apt`の使用方法です
```bash
# ダウンロードできるパッケージリストを更新
sudo apt update

# インストールされたパッケージをすべて更新
sudo apt upgrade 

# dockerをインストール
sudo apt install docker
```

また，Linux brewをインストールすることでMac同様に`brew`コマンドを使用することが可能です。


## Linux・UNIXのコマンド

UNIXコマンドとは，UNIXシステムや，その派生のLinux・MacOSなどで使われるコマンドです。

UNIXコマンドは，シェル（bash，zsh，fish，etc...）と呼ばれるプログラムを通して，キーボードから入力された文字列を解釈し，システムに対する命令として実行します。

- ファイル操作 
	- ファイルやディレクトリを作成、削除、移動、コピー、検索などするコマンド
	- touch, rm, mv, cp, find
- テキスト処理
	- テキストファイルの内容を表示、編集、結合、分割、置換などするコマンド
	- cat, less, head, tail, sed
- システム管理
	- システムの状態や設定を確認、変更するコマンド
	- ps, top, kill, date, uname
- ネットワーク
	- ネットワークの接続や通信を行うコマンド
	- ping, ssh, scp, curl, wget

UNIXコマンドは，単独で使うこともできますが，パイプやリダイレクトといった機能を使って，複数のコマンドを組み合わせることで，より高度な処理を行うこともできます。

```
cat .bashrc | grep aaa
```

## Linux・UNIXのディレクトリ構成

Unixのディレクトリ構成は，ファイルシステム階層標準（FHS）という規格に基づいて決められています。

FHSでは，ディレクトリの役割や内容に応じて，ルートディレクトリ（/）の下にさまざまなサブディレクトリを配置しています。

* /binには基本的なコマンドの実行ファイル
* /etcにはシステム全体の設定ファイル
* /homeには一般ユーザーのホームディレクトリ
* /devにはデバイスファイル

が格納されています。




第一章：Linuxの基本

# Reactとは

UI（ユーザインターフェース）≒ Web上のアプリケーションの見た目 を構築するための JavaScriptライブラリ

コンポーネントと呼ばれる部品を組み合わせてページを構築していく。

例えば、 [google.com](http://google.com) を見てみると以下の部品でページが構築されていることがわかる。

- ヘッダー
    - 左上の「Googleについて」「ストア」
    - 右上の「Gmail」「画像」、９個の点でできた四角いアイコン、ユーザのアイコン
- 中央の「Google」のロゴ
- 中央の検索ボックス
    - 虫眼鏡アイコン
    - 検索したい文字が入力できるエリア
    - 音声検索用のアイコン（ボタン）
    - 画像検索用のアイコン（ボタン）
- フッター
    - 所在地（日本）
    - 左下の「広告」「ビジネス」「検索の仕組み」
    - 右下の「プライバシー」「規約」「設定」

こんな感じで、複数のコンポーネントを組み合わせて画面を構築することができるのが React 

# DOM, 仮想DOM

## DOM について

DOM（Document Object Model）は、Webページなどを表現するためのものです。

DOMは、HTMLなどをツリー構造として表現し、それぞれの要素にアクセスすることができます。

DOMを使用すると、JavaScriptを使用して、HTML内の特定の要素を検索して、テキストを変更したり、スタイルを変更したりすることができます。

## 仮想DOMについて

仮想DOMは、実際のDOMの表現をメモリ内に仮想的に作成することで、より高速なレンダリングとパフォーマンスを実現します。

Reactでは、仮想DOMが、Reactコンポーネント内で定義されたステート（状態）の変化に対して自動的に再描画され、変更が必要な部分だけが実際のDOMに反映されます。

例えば、仮想DOMを使わない場合、リアルタイムで大量のテキストを書き換えるようなアプリケーションだと、大量のDOMノードを操作する必要があり、レンダリングのパフォーマンスが低下することがあります。

しかし、仮想DOMを使うと、Reactがメモリ内に仮想DOMを作成し、必要な変更を仮想DOMに適用し、実際のDOMに反映する際に、必要な変更だけを効率的に適用することができます。

れにより、パフォーマンスが向上し、スムーズなUX（ユーザーエクスペリエンス）が提供されます。

# ライフサイクル・レンダリング

参考リンク： [https://react.dev/learn/render-and-commit](https://react.dev/learn/render-and-commit)

Reactのレンダリングは以下の3つのステップに分かれています。

1. レンダリングのトリガー
2. コンポーネントのレンダリング
3. DOMへのコミット

Reactのレンダリングをレストランでの例で例えると、以下のようなイメージです。

1. お客さんの注文をキッチンに伝える
2. キッチンで調理
3. 料理をテーブルに届ける

それぞれについて詳しく説明します。

## レンダリングのトリガー

コンポーネントがレンダリングされるタイミングは2つあります。

1. コンポーネントの初期レンダリング
    1. ページを最初に読み込むときに、最初のレンダリングを行う必要がある
    2. 例：レストランのお客さんが最初の注文を行う
2. コンポーネント（もしくはその親）の状態が更新
    1. 後で説明する `set関数` で関数や変数の状態を更新することによって、再度レンダリングされる。
    2. 例：レストランのお客さんが、喉の渇きやお腹の空き具合によって再度注文する

## コンポーネントのレンダリング

レンダリングがトリガーされると、Reactはコンポーネントを呼び出して画面に表示するものを決める。

「レンダリング」＝ Reactがコンポーネントを呼び出すこと。

1. 最初のレンダリングで、 React はルートコンポーネント（最上位のコンポーネントのこと。≒ HTML の <body>に相当するもの）を呼び出す。
2. Reactによって状態が更新された関数コンポーネントが再度レンダリングされる。

	
	
## DOMへのコミット

コンポーネントをレンダリングした（呼び出した）あと、React は DOM を変更する。

1. 最初のレンダリングでは、作成したすべてのDOMのノードを画面に配置する。
2. 再レンダリングでは、Reactは必要最低限の操作（レンダリング中に計算される）によって、DOMを最新のものに更新する

React基礎

# Webアプリケーションのレンダリング

Webアプリケーションでは、画面にコンテンツを表示するためにいくつかの方法があります。  
代表的に、CSR, SSR, SSG, ISR という４種類があります。  
以下で、これらの説明をします。

## 1. CSR（Client-Side Rendering）
   クライアントサイドレンダリング（CSR）では、すべてのレンダリングがユーザーのブラウザ（クライアント）で行われます。  
	 サーバーからは基本的なHTML骨組みとJavaScriptファイルが送られ、JavaScriptがブラウザ上で実行されてHTMLを生成します。  
	 これにより、ページの内容や構造がブラウザで動的に生成されます。

   **例え：**  
	 あなたがレストラン（ウェブサイト）に入ると、シェフ（JavaScript）があなたの注文（ユーザーの行動やリクエスト）に基づいて料理（ウェブページ）を作り始めます。  
	 このため、注文を受けてから料理が完成するまで待つ時間が必要です（ページがレンダリングされるまでの待機時間）。

## 2. SSR（Server-Side Rendering）
   サーバーサイドレンダリング（SSR）では、ウェブページはサーバー上でレンダリングされ、クライアントには既に生成されたHTMLが送られます。  
	 これにより、ユーザーはページのロードを待つ時間が短縮されます。  
	 しかし、頻繁に更新が必要なページに対しては、都度サーバーでレンダリングを行う必要があるため、サーバーへの負荷が高まる欠点があります。
	 

   **例え：**  
	 レストラン（ウェブサイト）に入ると、シェフ（サーバー）が事前に料理（ウェブページ）を準備しており、すぐに提供できます。  
	 ただし、毎回注文が入る度にシェフが料理を作り直すため、シェフ（サーバー）への負担が増えます。


## 3. SSG（Static Site Generation）
   静的サイト生成（SSG）では、ビルド時にすべてのページがサーバー上でレンダリングされ、HTMLが生成されます。  
	 これらのHTMLは事前に生成されるため、リクエストがあったときにはすぐに配信できます。  
	 更新の頻度が低く、大量のユーザーに対して同じ内容を配信する場合に適しています。  

   **例え：**  
	 レストラン（ウェブサイト）が開店する前に、シェフ（サーバー）が予め料理（ウェブページ）を作っておきます。  
	 顧客が来たときには、すぐに料理を提供できます。  
	 ただし、メニュー（ウェブページの内容）が変わるたびに、すべての料理を作り直す必要があります。


## 4. ISR（Incremental Static Regeneration）
   増分静的再生成（ISR）は、SSGの概念を拡張したもので、特定のページがリクエストされるとそのページだけを再生成します。  
	 これにより、更新頻度が高いウェブサイトでも、ユーザーに対して高速に静的なページを提供することができます。

   **例え：**  
	 レストラン（ウェブサイト）が開店する前にシェフ（サーバー）があらかじめ料理（ウェブページ）を作っておきます。  
	 しかし、ある料理（ページ）が注文されたときだけ、その料理を新鮮な状態で提供するために作り直します。  
	 これにより、常に新鮮で最新の料理（ウェブページ）を提供しながらも、全ての料理を毎回作り直す必要がありません。


# create-react-app とは
1つのコマンドでReactのアプリを作成できるコマンド。  
簡単に環境構築できるので、アプリ開発に集中できるメリットがある。  


# 環境構築

環境構築済みのリポジトリがあるので、ここからクローンしてくる。  
クローン方法は README.md に記述しているのでそれを参考に進める。

https://github.com/NUTFes/React-Curriculum/tree/main


手元で一から環境構築したい場合は、以下の`環境構築方法` を参考に進めてください。

<details>
<summary>環境構築方法</summary>

	参考サイト： https://qiita.com/kurokawa516/items/2be4d40a49bc06d14876 
	
1. 適当なディレクトリを作成

	```
	mkdir React-Curriculum
	cd React-Curriculum
	```
	
2. docker 関係のファイルを作成
	
	```
	touch Dockerfile
	touch docker-compose.yml

	```

3. docker 関係のファイルを更新

	Dockerfile
	```Docker
	FROM node:18.16.1-alpine
	WORKDIR /usr/src/app
	```
	
	docker-compose.yml
	```
	version: '3'

	services:
		app:
			build: .
			volumes:
				- ./:/usr/src/app
			command: sh -c 'cd react-app && yarn start'
			ports:
				- '3000:3000'
	
	```
	
4. build する
	
	`docker compose build` でビルドする
	
5. React アプリの作成

	`docker-compose run --rm app sh -c 'npx create-react-app react-app --template typescript` を実行し、 React アプリケーションを作成する。

6. React アプリの起動
	
	`docker compose up` をターミナルで実行し、アプリケーションを起動する。
	
</details>


# できたファイルの説明

1. src
    1. 開発用ファイルを格納
    2. JSXはここに置く
2. public
    1. 画像とか



WebアプリケーションのレンダリングとDocker による React の環境構築

# JSXとは

1. JSの拡張言語
2. HTMLっぽいけど、JSの構文が使える

# なぜJSXを使うのか

1. reactで書いたものは、JSでしかないから最終的にHTMLに変換する
2. createElementでもreact要素を生成できるしHTML要素に変換できる。でも、毎回書くのが大変
3. だからHTMLライクにかけるJSXの方が良い

# JSXの基礎文法

1. 基本的にはHTMLと同じ
    
    ```jsx
    import React from 'react';
    
    function App() {
      return (
        <div>
          <h1>Hello, World!</h1>
          <p>This is a React app.</p>
        </div>
      );
    }
    
    export default App;
    ```
    
2. classはclassNameに
    
    ```jsx
    import React from 'react';
    
    function App() {
      return (
        <div className="container">
          <h1>Hello, World!</h1>
          <p className="text">This is a React app.</p>
        </div>
      );
    }
    
    export default App;
    ```
    
3. キャメルケース
    
    ```jsx
    import React from 'react';
    
    function App() {
      const myName = "John Doe";
      return (
        <div>
          <h1>Hello, {myName}!</h1>
          <p>This is a React app.</p>
        </div>
      );
    }
    
    export default App;
    ```
    
4. {}で変数を扱える
    
    ```jsx
    import React from 'react';
    
    function App() {
      const myName = "John Doe";
      const age = 30;
      return (
        <div>
          <h1>Hello, {myName}!</h1>
          <p>You are {age} years old.</p>
        </div>
      );
    }
    
    export default App;
    ```
    
5. returnの中は絶対に1つの要素
    1. 最上位（returnの直下）は並列にはできない
    
		NG例
		```jsx
		import React from 'react';
    
    function App() {
      const myName = "John Doe";
      const age = 30;
      return (
				<h1>Hello, {myName}!</h1>
				<p>You are {age} years old.</p>
      );
    }
    
    export default App;
		```
		
		OK例
		
		```jsx
		import React from 'react';
    
    function App() {
      const myName = "John Doe";
      const age = 30;
      return (
        <div>
          <h1>Hello, {myName}!</h1>
          <p>You are {age} years old.</p>
        </div>
      );
    }
    
    export default App;
		```
6. 配列のレンダリング
    1. map() で配列をレンダリング
    2. key の指定が必須
    
    ```jsx
    import React from 'react';
    
    function App() {
      const items = [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ];
      return (
        <ul>"
          {items.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      );
    }
    
    export default App;
    ```

JSXの基本と記述方法・活用方法

# コンポーネントとは

1. コンポーネントとは
    1. 見た目と機能を持つUI部品
    2. コンポーネントを組み合わせてページを作る
    3. クラスコンポーネントと関数コンポーネントがあるけど、最近は関数コンポーネントが主流
        1. 関数コンポーネントのほうが記述が少ない
        2. Hooksのおかげで、どっちも同じようなことができるようになった
2. なぜコンポーネントを使うのか
    1. 再利用するため
    2. コードの可読性を上げるため
    3. 変更に強くするため

# コンポーネントの基本的な使い方

1. インポートとエクスポートによってコンポーネントを使用する  
    1. 1つのファイルで複数のコンポーネントを宣言できるけど、ファイルが大きいと可読性や保守性が下がる
    2. コンポーネントを独自のファイルにエクスポートしてから、そのコンポーネントをインポートする。
    
    ```jsx
    // Button.tsx
    import React from 'react';
    
    function Button() {
      return (
        <button>ボタン</button>
      );
    }
    
    export default Button;
    
    // App.tsx
    import React from 'react';
    import Button from './Button';
    
    function App() {
      return (
        <div>
          <h1>Hello, World!</h1>
          <Button />
        </div>
      );
    }
    
    export default App;
    ```
    
2. ファイル名はアッパーキャメルケース
    
    ↑ の Button.tsx, App.tsx というファイル名からわかる
    
3. 子コンポーネントでexport
    
    ```jsx
    // ChildComponent.js
    import React from 'react';
    
    function ChildComponent() {
      return (
        <p>Child Component</p>
      );
    }
    
    export default ChildComponent;
    ```
    
4. 親コンポーネントでimport
    
    ```jsx
    // ParentComponent.js
    import React from 'react';
    import ChildComponent from './ChildComponent';
    
    function ParentComponent() {
      return (
        <div>
          <h1>Hello, World!</h1>
          <ChildComponent />
        </div>
      );
    }
    
    export default ParentComponent;
    ```
    

# コンポーネント間のデータの受け渡し

1. コンポーネント間のデータの受け渡し
    1. propsを用いてデータを受け渡す
        1. 全部を部品化するってことは、その部品で表示するデータは部品ごとで異なる。
        2. だから、その部品を使う側（親コンポーネント）で呼び出してあげる必要がある
    
    ```jsx
    // Button.tsx
    import React from 'react';
    
    function Button(props) {
      const { text } = props;
      return (
        <button>{text}</button>
      );
    }
    
    export default Button;
    
    // App.tsx
    import React from 'react';
    import Button from './Button';
    
    function App() {
      return (
        <div>
          <h1>Hello, World!</h1>
          <Button text="Click me!" />
        </div>
      );
    }
    
    export default App;
    ```

ReactにおけるUIの説明

# クリックで alert を表示

`handleClick()` で `alert` を 表示する。

この `handleClick()` を props で `<Button>` コンポーネントに渡してあげる。

それを、`onClick` として子コンポーネントで受け取り、`button` の `onClick` に渡してあげることでクリック時に `alert` を表示することができる。

```jsx
// Button.tsx
import React from 'react';

interface Props {
	onClick: () => void;
	text: string;
}

function Button(props: Props) {
  const { onClick, text } = props;
  return (
    <button onClick={onClick}>{text}</button>
  );
}

export default Button;

// App.tsx
import React from 'react';
import Button from './Button';

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };
  return (
    <div>
      <h1>Hello, World!</h1>
      <Button onClick={handleClick} text="Click me!" />
    </div>
  );
}

export default App;
```



イベントの処理

# React Hooksとは

React 16.8 から使えるようになった機能。

クラスを書かなくても、関数コンポーネントで state などの React の機能を使えるようなもの。

この章では、基本的なHookである `useState` , `useEffect` , `useContext` の3種類の説明を行う。

他にも、 `useMemo` , `useCallback` , `useRef` , `useReducer` などがあるが、今回は説明を省略する。

# useState

コンポーネントの state を保持したり更新したりするためのフックで、フックの中でも（多分）1番使う。

state とは、フォームに入力された値など、アプリが保持している状態（≒値、変数などのイメージ）のこと。

例えば、アプリ内で変更される値を管理したい時に使われる。具体的な例だと、入力フォームを実行する時に使用される。

```jsx
const [stateの変数, stateを更新する関数] = useState(stateの初期値)
// 型を指定する場合
const [stateの変数, stateを更新する関数] = useState<stateの型>(stateの初期値)

// イメージ
const [name, setName] = useState('taro')
const [name, setName] = useState<string>('taro')

```

## 具体的な使い方

```jsx
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

```

## 状態(state) の更新

### tips

1. setState() してすぐだと値が更新されてない
2. スプレッド構文（…） によるオブジェクトのコピーと更新
    
    ```jsx
    import { useState } from 'react';
    
    export default function Form() {
    	const [form, setForm] = useState({
    	firstName: 'Barbara',
    	lastName: 'Hepworth',
    	email: 'bhepworth@sculpture.com',
    });
    
    return (
    	<>
    		<label>
    			First name:
    			<input
    				value={form.firstName}
    				onChange={e => {
    					setForm({
    					...form,
    					firstName: e.target.value
    					});
    				}}
    			/>
    		</label>
    		<label>
    			Last name:
    			<input
    				value={form.lastName}
    				onChange={e => {
    					setForm({
    					...form,
    					lastName: e.target.value
    					});
    				}}
    			/>
    		</label>
    		<label>
    			Email:
    			<input
    				value={form.email}
    				onChange={e => {
    					setForm({
    					...form,
    					email: e.target.value
    					});
    				}}
    		/>
    		</label>
    		<p>
    			{form.firstName}
    			{form.lastName}
    			{form.email}
    		</p>
    	</>
    );
    }
    ```
    
3. 配列の更新
    
    ```jsx
    function handleToggle(artworkId, nextSeen) {
        setList(list.map(artwork => {
          if (artwork.id === artworkId) {
            return { ...artwork, seen: nextSeen };
          } else {
            return artwork;
          }
        }));
      }
    
    ```
    

# useEffect

useEffectは、関数コンポーネントで副作用を制御できるフック。

副作用とは、DOMの変更やファイルへの書き込みなど、関数の外に影響を与える処理のこと。useEffectを使用すると、関数を実行するタイミングをReactのレンダリング後まで遅らせることが可能になる。

useEffectでは、マウント時に行った処理をアンマウント時に解除する。

副作用関数はレンダリング時に毎回実行される仕組みです。そして、次の副作用関数を実行する前にクリーンアップ関数を返し、一つ前の副作用関数を解除。

この一連の繰り返し処理はライフサイクルと呼ばれる。

useEffectの基本的な記述方法は次の通り

```jsx
useEffect(() => {
  // 副作用処理を記述
return () => {
  // クリーンアップ処理を記述
};
}, [副作用関数の実行タイミングを制御する依存配列]);

```

useEffectが必要なケースとして、コンポーネントの呼び出し時に外部APIからリソースを取得する場合などが挙げられる。

# useContext

コンテクストオブジェクト（`React.createContext` からの戻り値）を受け取り、そのコンテクストの現在値を返す。

コンテクストの現在値は、ツリー内でこのフックを呼んだコンポーネントの直近にある  `<MyContext.Provider>`  の  `value`  の値によって決定される。

`const value = useContext(MyContext);`

直近の `<MyContext.Provider>` が更新された場合、このフックはその `MyContext` プロバイダに渡された最新の `value` の値を使って再レンダーを発生させます。祖先コンポーネントが  [React.memo](<https://ja.reactjs.org/docs/react-api.html#reactmemo>)  や  [shouldComponentUpdate](<https://ja.reactjs.org/docs/react-component.html#shouldcomponentupdate>)  を使っている場合でも、`useContext` を使っているコンポーネント自体から再レンダーが発生します。

`useContext` に渡す引数は**コンテクストオブジェクト自体**であることを忘れないでください。

- **正しい：**`useContext(MyContext)`
- **間違い：**`useContext(MyContext.Consumer)`
- **間違い：**`useContext(MyContext.Provider)`

`useContext` を呼び出すコンポーネントはコンテクストの値が変化するたびに毎回再レンダーされます。再レンダーが高価である場合は[メモ化を使って最適化](https://github.com/facebook/react/issues/15156#issuecomment-474590693)が可能です。

# その他のHooks

上記のHooksの他にも、 `useCallback`, `useMemo`, `useRef`  などがありますが、今回は説明を省略します。

React Hooks の習得

# Proxmoxを渡したPCに構築し，操作することができる。


## 内容

### Proxmoxインストーラーの作成

- ハイパーバイザーOSのダウンロード
    - [Proxmox VE 7.4](https://www.proxmox.com/en/downloads/item/proxmox-ve-7-4-iso-installer) に移動
    - ボタンを押しダウンロード（数時間かかる場合もある）
- インストールメディア作成ツールのダウンロード
    - [Rufus](https://forest.watch.impress.co.jp/library/software/rufus) に移動
    - ダウンロード
- インストーラ作成
    - 設定
        - デバイス：インストーラーにしたいUSBを選択
        - ブートの種類：ファイルから選ぶ
        - 右側の ダウンロード／選択：選択にしてクリックしProxmoxを指定
    - メディア作成
        - スタートを押下し数分間待つ

### インストール

- BIOS起動
    - Windows PCを起動
    - Shift+再起動
    - オプションが表示されるのでトラブルシューティングを選択
    - 詳細オプションの中の，UEFI ファームウェアの設定を選択
    - proxmoxのUSBを刺して再起動してBIOSを開く
- BIOSの設定（PCによって変わる）
    - Startupタブ
        - USBのインストーラーを優先的に起動するため，Primary Boot Sequence を USBが一番になるように設定
    - Advancedタブ
        - CPU Setup
            - Intel(r) Virtualization Technology を Enable
            - VT-d を Enable
    - Exit
- Proxmoxをインストール
    - Install Proxmox VE を押してインストール
    - 初期設定
        - Management Network Configuration
            - Hostname （例：pve04.local）
            - IP Address （例：192.168.1.100）
        - 設定一覧
            ![](https://i.imgur.com/9uE98Ye.jpg)




第二章：Proxmoxの準備

# Linuxの仮想化について理解しProxmoxでVMを作成する

 ## 仮想化とは

仮想化とは，物理的なコンピューターのリソースを複数の仮想的なコンピューターに分割して利用する技術です。Linuxにおいては、仮想化には主に以下の3種類の方法があります。

### ホスト型

ホスト型はOS上に土台となる仮想化ソフトウェアをインストールし、仮想化ソフトウェアで仮想マシンを稼働させる方法です。すでに動作しているコンピュータの中に仮想マシンが作れるためホストOSと仮想化ソフトウェアを動作させるのでハードウェアにかかるリソースは余計に消費をしてしまいます（オーバーヘッド）。従って、本番環境には適さず，検証環境にはよく使われます。これは，仮想化環境の構築がしやすいためです。ホスト型の仮想化ソフトウェアにはOracle VM Virtualbox，bluestacksなどがあります。

### ハイパーバイザー型

ハイパーバイザーと呼ばれるソフトウェアを利用して、物理的なコンピューター上に複数の仮想マシンを作成します。仮想マシンはハイパーバイザーを介してリソースを共有しますが、それぞれ独立したオペレーティングシステムを実行できます。例えば、Microsoft Hyper-V，KVMやXenなどがハイパーバイザーです。WSL2はHyper-Vを使用し実現されています。ProxmoxもKVMを内部的に使用しているため，GUIでVMを作成することができます。

### コンテナ型

ハイパーバイザーを利用せずに、カーネルレベルでリソースの隔離や制御を行う技術です。物理的なコンピューター上に複数のコンテナと呼ばれる仮想的な環境を作成します。コンテナは同じカーネルを共有しますが、それぞれ独立したファイルシステムやプロセス空間を持ちます。例えば、LXCやDockerなどがコンテナ型仮想化の技術です。

## Proxmoxを使用したVM作成

### VMテンプレートの作成

- pveのコンソールにてVMイメージのテンプレートを作成
```bash
wget https://cloud-images.ubuntu.com/focal/current/focal-server-cloudimg-amd64.img
qm create 999 --memory 1024 --net0 virtio,bridge=vmbr0
qm importdisk 999 focal-server-cloudimg-amd64.img local-lvm
qm set 999 --name Ubuntu-20.04
qm set 999 --scsihw virtio-scsi-pci --scsi0 local-lvm:vm-999-disk-0
```
- Cloud-initの設定
Cloud-initドライブを定義してやることで後の設定を簡単にする
```bash
qm set 999 --ide2 local-lvm:cloudinit
qm set 999 --boot c --bootdisk scsi0
qm set 999 --serial0 socket --vga serial0
qm template 999
```

### VMの作成

- テンプレートのクローン

作成したテンプレートを右クリックしてクローン
![](https://i.imgur.com/PpwBatj.png)

ID，名前（サービス名），モードを決めてクローン
![](https://i.imgur.com/LmoMMyw.png)
* 完全クローン：ストレージをそのままコピー
* リンククローン：差分だけ保持

### Cloud-initの設定

VMを起動する前に設定することで起動直後の初期設定をしないですむ
![](https://i.imgur.com/M3altUz.png)

- ユーザー：nutmeg
- パスワード：XXXXXXX
- IP構成：192.168.1.<サービスID>/24
- デフォルトゲートウェイ：192.168.1.1

## 起動

起動と同時にCloud-initの処理がまわる




第三章：仮想化とは

# コンテナについて学習しProxmoxでCT作成

## コンテナとは

Linuxカーネルを実行しているホスト上で、複数の隔離されたLinuxシステム（コンテナ）を走らせる仮想化技術のことです。コンテナは仮想マシンを作り出すのではなく、OSが利用するリソースを隔離することで独立した環境を提供します。これは，ハードウェアをシミュレートする必要がないため、仮想化によるオーバーヘッドはほぼ存在しません。また、コンテナは起動や停止が高速に実行できます。

Linuxでコンテナ型仮想化を実現するソフトウェアとしては、LXC（Linux Containers）やDockerなどがあります。今回はProxmoxでLXCを使用したコンテナを作成します。

LXCはLinuxカーネル2.6.24より搭載されたcgroupsと呼ばれるリソース管理機構を用いて実装されており、プロセスに対しchrootのように特定のディレクトリをルートディレクトリと認識させ、かつcgroupsの名前空間機能を使って各種リソースを隔離することで、仮想的な環境の構築を実現しています。

DockerはLXCをベースに開発されたもので、コンテナの作成や管理を簡単に行えるようにしたものです。Dockerではコンテナのイメージを作成し、それを元にコンテナを起動します。こちらは次章で学習します。

## CTテンプレートの作成

### pveのコンソールにてVMイメージのテンプレートを作成

localボリュームのタブからCTテンプレートを選択し，TempletesボタンからUbuntuをダウンロードする。
```bash
pct create 1000 local:vztmpl/ubuntu-20.04-standard_20.04-1_amd64.tar.gz -storage local-lvm -unprivileged 1 --features nesting=1
pct set 1000 -net0 name=eth0,bridge=vmbr0,ip=dhcp
pct set 1000 -hostname ubuntu-20.04
pct start 1000
pct enter 1000
# --lxcコンテナ内---
adduser nutmeg
gpasswd -a nutmeg sudo
apt update
apt upgrade
apt install mysql-client curl wget docker docker-compose
exit
# --------
pct stop 1000
pct template 1000
```

## CTの作成

### テンプレートのクローン
作成したテンプレートを右クリックしてクローン
![](https://i.imgur.com/PpwBatj.png)

ID，名前（サービス名），モードを決めてクローン
![](https://i.imgur.com/LmoMMyw.png)
* 完全クローン：ストレージをそのままコピー
* リンククローン：差分だけ保持

## CTの設定

CTを起動する前に設定することで起動直後の初期設定をしないですむ
![](https://i.imgur.com/M3altUz.png)

- ユーザー：nutmeg
- パスワード：XXXXXXX
- IP構成：192.168.1.<サービスID>/24
- デフォルトゲートウェイ：192.168.1.1

## 起動

VMに比べてくそほど早い。
NUTMEGでは現状このCTを本番環境とし，ここにデプロイを行います。


第四章：コンテナについて

# Docker・Docker Composeを知り，Nginxコンテナを立ち上げる 


## Dockerとは

Dockerとは、アプリケーションをコンテナという単位で管理する仕組みです。コンテナは、アプリケーションの実行に必要な環境や依存関係を一つにまとめたもので、どのようなOSやハードウェアでも同じように動作します。これにより、開発やテスト、デプロイなどの作業を効率的に行うことができます。

## Docker Composeとは

Docker Composeとは、複数のDockerコンテナを一括で管理するツールです。Docker Composeでは、YAMLファイルにコンテナの設定を記述し、コマンド一つで起動や停止などの操作ができます。これにより、複雑なアプリケーションの構成や連携を簡単に実現することができます。

## NginxをDocker Composeで立ち上げ

- WSL上に作業フォルダ`nginx-docker`をコマンドで作成
- コマンドで`docker-compose.yml`を作成
- お気に入りのエディタで`docker-compose.yml`を編集

`docker-compsoe.yml`
```yaml!
version: '3'
services:
  web:
    image: 'nginx:1.17'
    container_name: 'docker-nginx-web'
    ports: ['8080:80']
```

- `web`がサービス名
- `image`では公開されてあるdockerイメージを指定
- `container_name`でコンテナに命名

次に以下コマンドでコンテナを立ち上げる。

```bash!
docker compose up
```

コマンドを使用したディレクトリにある`docker-compose.yml`を参照し，Dockerコンテナを起動してくれる。
`localhost:8080`に移動するとnginxのページが表示されるはず。

- 同階層に`nginx.conf`を作成
- 同階層に`html`ディレクトリを作成し，`index.html`を作成
- `docker-compose.yml`を編集

`nginx.conf`
```nginx!
server {
    listen 80;

    location / {
        root /var/www/vhosts/html;
        index  index.html index.htm;
        try_files $uri /index.html;
    }

}
```

`docker-compsoe.yml`
```yaml!
version: '3'
services:
  web:
    image: 'nginx:1.17'
    container_name: 'docker-nginx-web'
    # 以下を追記・変更
    volumes:
      - './nginx.conf:/etc/nginx/conf.d/default.conf'
      - './html:/var/www/vhosts/html'
    ports: ['8080:80']
```

- `volumes`でホストのファイルをDockerに同期する
- `ports`でホストとDockerのポートを同期する

以上で，`index.html`を編集すると`localhost:8080`のページが変わるはず。




第五章：Docker・Docker Composeとは

# ネットワークの基本を理解する

## ドメイン

インターネット上で識別される名前のことで、例えば「tech-camp.in」や「google.com」などがあります。ドメインは、IPアドレスと対応づけられています。

## DNS

Domain Name Systemの略で、ドメインとIPアドレスの対応関係を管理するシステムのことです。DNSによって、人間が覚えやすいドメインでインターネット上のサイトにアクセスできます。

## IPアドレス

Internet Protocol Addressの略で、インターネット上で通信する際に割り当てられる番号のことです。IPアドレスは、グローバルIPアドレスとプライベートIPアドレスに分けられます。

## グローバルIPアドレス

世界中で一意に決まるIPアドレスで、インターネットに接続する際に必要です。プロバイダから割り振られます。

## プライベートIPアドレス

特定のネットワーク内で使用されるIPアドレスで、ルーターなどから割り振られます。同じプライベートIPアドレスでも、異なるネットワークでは別々に使用できます。

## ポート

コンピューター内で通信する際に使用される番号のことです。ポート番号は、通信するアプリケーションやサービスによって決まります。例えば、Webサイトにアクセスする際は80番ポートを使用します。

## リバースプロキシ

一般的なプロキシサーバーは、クライアントからサーバーへの通信を仲介するものですが、リバースプロキシはその逆で、サーバーからクライアントへの通信を仲介します。リバースプロキシは、負荷分散やセキュリティ強化などの目的で使用されます。

## VPN

Virtual Private Networkの略で、インターネット上に仮想的な専用回線を作る技術のことです。VPNを使用すると、遠隔地からでも安全に特定のネットワークに接続できます。




第六章：ネットワークの基礎

# CloudflareでNginxを独自ドメインで外部に公開する


## docker-compose.ymlを編集

cloudflareのサービスを追加し，以下のように設定する。

- cloudflareコンテナを使用
- `./cloudflare`を`/home/nonroot/.cloudflared`にマウント
- 起動時にtunnelを起動

`docker-compose.stage.yaml`

```yaml!
version: '3'
services:
  web:
    ...
    
  cloudflare:
    image: 'cloudflare/cloudflared:latest'
    container_name: 'docker-nginx-cloudflare'
    volumes: ['./cloudflare:/home/nonroot/.cloudflared']
    command: tunnel run
```

ここで`./cloudflare`ディレクトリをDockerユーザーでも書き込み可能に指定しておく
```
chmod o+rwx ./cloudflare
```

## Cloudflare設定

### NUTFESのアカウントでログイン

cloudflare.com に移動しログイン

### コンテナ内のcloudflareを認証


以下のコマンドを入力するとログインURLが表示されるのでログイン。

```bash!
docker compose run --rm cloudflare tunnel login

# ↓ 出力

Please open the following URL and log in with your Cloudflare account:
https://dash.cloudflare.com/argotunnel...
Leave cloudflared running to download the cert automatically.
...

```

URLの先に飛ぶと以下の画面に遷移し，使用したいドメインでAuthorize
![](https://i.imgur.com/rOynYak.png)

ここで，`./cloudflare`にTunnelの使用に必要な`cert.pem`を得る。

### Tunnel作成

トンネルの名前を指定して作成
※ すでに作成している名前だとエラーが起きる

group-managerだと，`gm2-stg`という名前に設定した。
今後も`<product-name>-stg`とかにすると後でわかりやすいかも。

```bash!
docker compose run --rm cloudflare tunnel create <tunnel-name>
```

ここで、`./cloudflare`に`<tunnel-id>.json`を得る


### 設定ファイル作成

`cloudflare/config.yaml`
```yaml!
tunnel: <tunnel-id>
credentials-file: /home/nonroot/.cloudflared/<tunnel-id>.json
protocol: http2 # eduroam 対策

ingress:
  - hostname: <name>.nutmeg.cloud
    service: http://web:8080
  - service: http_status:404
```


### コンソールからDNSの設定

configで設定したhostmameすべてに対して以下のコマンドを実行

```bash!
docker compose run --rm cloudflare tunnel route dns <tunnel-name> <hostname(example.hoge.net)>
```

## 起動

以上の設定を済ませてしまえば今後は以下コマンドで起動するだけ。
```bash!
docker compose -f docker-compose.stage.yml up
```

以下のログが確認出来たら成功

```bash!
INF Connection <tunnel-id> registered with protocol: http2
```




第七章：Cloudflareの使い方

# ProxmoxのCTで独自ドメインでNginxを外部公開

- ProxmoxでCTテンプレートからクローン
- `git`をインストールし`docker-nginx`をCTにクローン
- `docker`，`docker compose`をインストールし`docker-compose up`で立ち上げ

第八章：デプロイしてみよう

## 第一章：変数

### 宣言

TypeScriptでは、変数を宣言するには次のようにすることができます。

```typescript
let variableName: type = value;
```

これは、letキーワードで変数を宣言し、変数名を指定します。次に、コロン（: ）の後にデータ型を指定し、イコール（= ）の後に初期値を設定します。

たとえば、数値を格納する変数を宣言する場合は、次のようになります。

```typescript
let myNumber: number = 10;
```

また、型を明示的に指定せずに変数を宣言することもできます。この場合、TypeScriptは初期値からデータ型を推論します。

```typescript
let myNumber = 10; // TypeScriptは自動的にmyNumberをnumber型と推論します
```

また、変数のスコープによって、変数を宣言するキーワードが異なります。

let：ブロックスコープの変数を宣言するためのキーワード
const：定数を宣言するためのキーワード
var：古いスコープ規則を持つ変数を宣言するためのキーワード

### letとvar

TypeScriptにおいて、letとvarは変数を宣言するキーワードですが、そのスコープが異なります。

letはブロックスコープの変数を宣言するためのキーワードであり、宣言されたブロック内でのみアクセス可能です。つまり、letで宣言された変数は、その変数が宣言されたブロックの中でのみ有効です。

例えば、以下のコードでは、letで宣言された変数xはifブロックの中でのみ有効であり、console.log(x)の行で参照することはできません。

```typescript=
if (true) {
  let x = 10;
}

console.log(x); // エラー: xは未定義です
```
一方、varは関数スコープの変数を宣言するためのキーワードであり、宣言された関数内でのみアクセス可能です。つまり、varで宣言された変数は、その変数が宣言された関数内で有効です。

例えば、以下のコードでは、varで宣言された変数yはifブロックの外でも参照できます。

```typescript=
if (true) {
  var y = 10;
}
console.log(y); // 10
```

しかし、varで宣言された変数は、関数外でも参照できてしまうため、意図しない変更が起こる可能性があります。そのため、letの使用が推奨されています。

なお、TypeScriptにはconstという定数を宣言するためのキーワードもあります。constで宣言された変数は、再代入ができない定数となります。

### const

以上のような理由から、TypeScriptにおいてはconstを積極的に使用することが推奨されます。

- 可変性を防止するため
    constで宣言された変数は、再代入ができない定数となります。つまり、プログラムの実行中にその値が変更されることを防ぐことができます。これにより、プログラムの可読性や安全性を向上させることができます。
- コードの意図を明確にするため
    constで宣言された変数は、その値が定数であることが明確になります。また、変数名が大文字で書かれている場合は、定数であることがさらに強調されます。これにより、コードの意図を明確にすることができます。

### 演算

基本的な演算はJavaScriptと同様です。TypeScriptで使用できる主な演算子とその説明を以下に示します。

**算術演算子**

 +：加算
 
 -：減算
 
 *：乗算
 
 /：除算
 
 %：余り
 
 ++：インクリメント
 
--：デクリメント

**算術演算子のコード例**
```typescript=
const sum = 3 + 2; // 5
const diff = 7 - 3; // 4
const product = 2 * 3; // 6
const quotient = 8 / 2; // 4
const remainder = 7 % 3; // 1

let num = 5;
num++; // num = 6
num--; // num = 5
```

**比較演算子**

==：等しい

!=：等しくない

===：厳密に等しい

!==：厳密に等しくない

`>`：より大きい

<：より小さい

`>=`：以上

<=：以下


**比較演算子のコード例**
```typescript=
console.log(5 == 5); // true
console.log(5 != 4); // true
console.log(5 === "5"); // false
console.log(5 !== "5"); // true
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 3); // false
```

**代入演算子**

=：代入

+=：加算して代入

-=：減算して代入

*=：乗算して代入

/=：除算して代入

%=：余りを求めて代入

**代入演算子のコード例**
```typescript=
let num = 5;
num = 10; // num = 10
num += 5; // num = 15
num -= 2; // num = 13
num *= 3; // num = 39
num /= 2; // num = 19.5
num %= 4; // num = 3.5
```

**論理演算子**

&&：論理積 (AND)

||：論理和 (OR)

!：論理否定 (NOT)

**論理演算子のコード例**

```typescript=
const a = true;
const b = false;

const andResult = a && b; // false
const orResult = a || b; // true
const notResult = !a; // false
```

### === と == の違い

=== と == は、TypeScriptおよびJavaScriptで使用される比較演算子ですが、それぞれ異なる比較方法を持っています。

**==（等しい）**
== は、等価演算子とも呼ばれ、2つの値が等しいかどうかを比較します。ただし、型の違いがある場合、自動的に型変換が行われてから比較が行われます。そのため、異なる型の値でも、型変換後に同じ値になる場合、== は true を返します。

例:

```typescript=
console.log(5 == "5"); // true
console.log(0 == false); // true
```

**===（厳密に等しい）**
=== は、厳密等価演算子とも呼ばれ、2つの値が等しいかどうかを比較しますが、== とは異なり、型変換は行われません。そのため、比較される値の型が異なる場合、=== は false を返します。これにより、値と型の両方が一致している場合にのみ true を返します。

例:

```typescript=
console.log(5 === "5"); // false
console.log(0 === false); // false
```

一般的に、意図しない型変換による問題を避けるため、=== を使用して厳密な等価性を確認することが推奨されます。

第一章：変数

## 第二章：型

### 動的型付けと静的型付け

TypeScriptは、JavaScriptと違い静的型付けという特徴がある。
動的型付けと静的型付けの違いを示す。

**動的型付け（JavaScript）:**
- 変数に型がなく、値に型が付いています。
- 変数に格納される値の型は実行時に決定されます。
- 型の検証や型の情報を利用した補完が提供されないため、コードの安全性や保守性が低くなります。
- 型のエラーは実行時に発生し、デバッグが困難になることがあります。

**静的型付け（TypeScript）:**
- 変数や関数の引数、戻り値などに型を明示的に指定できます。
- コンパイル時に型の検証が行われ、型の不一致や未定義のプロパティへのアクセスなどのエラーを検出できます。
- 型情報に基づく補完やリファクタリング機能が提供されるため、開発者の生産性が向上します。
- 型のエラーはコンパイル時に検出されるため、実行時のエラーを減らすことができます。

JavaScriptの動的型付けは、開発速度を向上させる一方で、コードの保守性や安全性に課題があります。これに対して、TypeScriptの静的型付けは、型安全性や自動補完、リファクタリング機能を提供することで、コードの品質と開発者の生産性を向上させることができます。ただし、静的型付けは型定義の追加や型エラーの修正による開発のオーバーヘッドを伴います。



### 型の種類

TypeScriptでは、プリミティブ型と複合型の2種類の型があります。それぞれの特徴と代表的な型について説明します。

**プリミティブ型**
プリミティブ型は、最も基本的なデータ型であり、他の型を構成する基本的な単位です。以下は、TypeScriptの主要なプリミティブ型です。

- number：整数や浮動小数点数を表します。
- string：文字列を表します。
- boolean：真偽値（trueまたはfalse）を表します。
- null：値が存在しないことを示します。
- undefined：値が定義されていないことを示します。

```typescript=
// number
let age: number = 30;
let pi: number = 3.1415;

// string
let name: string = "John Doe";

// boolean
let isStudent: boolean = false;
```

**複合型**
複合型は、プリミティブ型や他の複合型を組み合わせて構成される複雑なデータ構造です。以下は、TypeScriptの主要な複合型です。

- object：キーと値のペアを表します。オブジェクトはクラスのインスタンスでもあります。
- array：値のリストを表します。型引数を指定できます。
- tuple：配列と似ていますが、要素の型と順序が固定されています。
- enum：列挙型で、予め定義された一連の名前付き定数を表します。

```typescript=
// object
let person: object = {
    firstName: "John",
    lastName: "Doe"
};

// array
let numbers: number[] = [1, 2, 3, 4, 5];

// tuple
let point: [number, number] = [0, 0];

// enum
enum Color {
  Red,
  Green,
  Blue
}
let color: Color = Color.Red;
```

### nullとundefinedについて

TypeScriptでは、null と undefined は特殊なプリミティブ型であり、値が存在しないことや未定義であることを示すために使用されます。それぞれの特徴について説明します。

**null:**
- null は、値が意図的に存在しないことを示すために使用されます。
- オブジェクトや他の複合型が期待される場所で、値が存在しないことを示すためによく使われます。
- JavaScriptおよびTypeScriptでは、null はリテラルであり、他の値とは区別されます。

`例: let emptyValue: string | null = null;`

**undefined:**
- undefined は、値がまだ定義されていないことを示すために使用されます。
- 変数が宣言されているが、値がまだ割り当てられていない場合、その変数のデフォルト値は undefined です。
- 関数が明示的に値を返さない場合、戻り値は undefined になります。

`例: let notDefined: string | undefined;`

null と undefined の違いは、前者が値が意図的に存在しないことを示し、後者が値がまだ定義されていないことを示す点にあります。

### string(文字列)について

string型は、文字列データを表します。文字列は、テキストデータやメッセージなどの情報を表現するのに一般的に使われます。TypeScriptの文字列は、シングルクォーテーション（'）またはダブルクォーテーション（"）で囲むことができます。また、バックティック（`）を使用してテンプレートリテラルとして定義することもできます。テンプレートリテラルでは、式を埋め込むことができます。

**例:**

```typescript=
const singleQuotedString: string = 'Hello, TypeScript!';
const doubleQuotedString: string = "Hello, TypeScript!";
const templateLiteralString: string = `Hello, TypeScript!`;
```

**テンプレートリテラルを使用した式の埋め込み例:**

```typescript=
const firstName: string = 'Alice';
const lastName: string = 'Johnson';
const fullName: string = `${firstName} ${lastName}`;
console.log(fullName); // 'Alice Johnson'
```

string型では、様々なメソッドを使用して文字列を操作できます。以下にいくつかの一般的なメソッドを紹介します。
 
**includes():**
文字列が指定した文字を含むかどうかを判断します。
```typescript=
const text = 'Hello, TypeScript!';
const includesType = text.includes('Type');
console.log(includesType); // true
```

**slice():** 
文字列の一部を切り出します。開始インデックスと終了インデックスを引数として渡すことができます。
```typescript=
const text = 'Hello, TypeScript!';
const slicedText = text.slice(0, 5);
console.log(slicedText); // 'Hello'
```

**substring():**
文字列の一部を切り出します。slice()と同様ですが、substring()は引数に負の値を受け付けません。
```typescript=
const text = 'Hello, TypeScript!';
const substringText = text.substring(0, 5);
console.log(substringText); // 'Hello'
```

**replace():**
文字列内の特定の文字列またはパターンに一致する部分を、指定した文字列で置換します。
```typescript=
const text = 'Hello, TypeScript!';
const replacedText = text.replace('TypeScript', 'JavaScript');
console.log(replacedText); // 'Hello, JavaScript!'
```

**split(): 文字列を指定した区切り文字で分割し、部分文字列の配列を返します。**
```typescript=
const text = 'Hello, TypeScript!';
const words = text.split(', ');
console.log(words); // ['Hello', 'TypeScript!']
```

これらは、TypeScriptで利用可能なstring型のメソッドの一部です。他にも多くのメソッドがあります。

### データ構造のメンバ
string型とarray型にはいくつか共通のメンバがあります。以下に、そのうちのいくつかを紹介します。

**length:**
文字列や配列の要素数を表します。文字列では、その文字数を示します。配列では、その要素の数を示します。lengthは読み取り専用のプロパティで、変更することはできません。

文字列の例:

```typescript=
const text: string = 'Hello, TypeScript!';
console.log(text.length); // 17
```

配列の例:

```typescript=
const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers.length); // 5
```

**indexOf():**
文字列や配列内で指定した要素を探し、その要素が見つかった最初のインデックスを返します。見つからない場合は、-1 を返します。

文字列の例:

```typescript=
const text: string = 'Hello, TypeScript!';
console.log(text.indexOf('Type')); // 7
console.log(text.indexOf('Java')); // -1
```

配列の例:

```typescript=
const numbers: number[] = [1, 2, 3, 4, 5];
console.log(numbers.indexOf(3)); // 2
console.log(numbers.indexOf(6)); // -1
```

このような共通メンバは、データ構造の操作を直感的で簡単に行うことができるように、TypeScriptで提供されています。ただし、string型とarray型は異なるデータ構造であるため、それぞれの型に固有のメソッドやプロパティも存在します。

第二章：型

## 第三章：制御構文

以下に、TypeScriptの基本的な制御構文について説明し、それぞれの例を示します。

**if文:**  
if文は条件に基づいて特定のコードブロックを実行します。

```typescript=
let age: number = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are not an adult.");
}
```

**switch文:**  
switch文は、値に応じて複数のコードブロックのいずれかを実行します。

```typescript=
let day: number = 1;

switch (day) {
    case 0:
        console.log("Sunday");
        break;
    case 1:
        console.log("Monday");
        break;
    case 2:
        console.log("Tuesday");
        break;
    default:
        console.log("Another day");
}
```

**for文:**  
for文は、指定された回数だけコードブロックを繰り返し実行します。

```typescript=
for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
}
```

**for...of文:**  
for...of文は、配列やイテラブルオブジェクトの要素を順に取り出して、それぞれに対してコードブロックを実行します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];

for (let num of numbers) {
    console.log(num);
}
```

**while文:**  
while文は、条件が真である限り、コードブロックを繰り返し実行します。

```typescript=
let count: number = 0;

while (count < 5) {
    console.log(`Count: ${count}`);
    count++;
}
```

**do...while文:**  
do...while文は、コードブロックを実行した後、条件が真である限り繰り返し実行します。

```typescript=
let count: number = 0;

do {
    console.log(`Count: ${count}`);
    count++;
} while (count < 5);
```

### truthyとfalsyについて

値が真偽値のコンテキストで使用される場合、それらは自動的にtrueまたはfalseに変換されます。この変換は、if文や三項演算子などの条件式で特に重要です。truthy値とは、自動的にtrueに変換される値のことです。逆に、falsy値とは、自動的にfalseに変換される値のことです。

以下に、一般的なfalsy値を挙げます。

```
false: 真偽値のfalseそのもの。
0: 数値のゼロ。
-0: 負のゼロ。
NaN: 数値ではない（Not a Number）特殊な値。
null: 値が存在しないことを示す特殊な値。
undefined: 値が定義されていないことを示す特殊な値。
'': 空文字列。
```

これら以外の値は、truthyと見なされます。例えば、非空の文字列や、要素を持つ配列、空でないオブジェクトなどがtruthyです。

以下に、truthyとfalsy値の例を示します。

```typescript=
if ('Hello, TypeScript!') {
  console.log('This is truthy.'); // 'Hello, TypeScript!'はtruthyなので、この行が実行されます。
}

if ('') {
  console.log('This is falsy.'); // ''はfalsyなので、この行は実行されません。
}
```
truthyとfalsy値の概念は、TypeScript（およびJavaScript）で条件付きロジックを書く際に重要です。明示的にtrueやfalseと比較する代わりに、値の真偽性を直接使用することができます。ただし、これによりコードがわかりにくくなる場合もあるため、適切な使い分けが重要です。

**!!演算子について**

!!（ダブル否定）演算子は、TypeScript（およびJavaScript）で値を明示的にtrueまたはfalseの真偽値に変換するために使用されるテクニックです。!（否定）演算子は、値の真偽性を反転させます。truthy値はfalseに、falsy値はtrueになります。ダブル否定（!!）は、2回否定を適用することで、値をその元の真偽性に戻しますが、結果として得られる値は明示的なtrueまたはfalseになります。

以下に例を示します。

```typescript=
const truthyValue = 'Hello, TypeScript!';
const falsyValue = '';

const explicitTrue = !!truthyValue; // true
const explicitFalse = !!falsyValue; // false
```

!!を使用することで、値がtruthyかfalsyかに関わらず、常にtrueかfalseのいずれかに変換されることが保証されます。これは、条件式や比較演算子の結果を明示的に真偽値として扱う場合に便利です。ただし、!!を過度に使用すると、コードが読みにくくなることがあるため、適切なバランスが重要です。

第三章：制御構文

## 第四章：ArrayとObject

配列は、同じ型の要素のコレクションであり、インデックスを使って要素にアクセスできます。TypeScriptでは、配列内の要素の型を指定することができるため、より型安全なコードを記述することができます。

配列の型を指定する方法は2つあります。

**配列型のシンタックス:**
型名の後に [] を追加して、その型の配列を示します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let names: string[] = ["Alice", "Bob", "Charlie"];
```

**ジェネリック型のシンタックス:**
Array<型> の形式で、ジェネリック型を使用して配列を定義します。

```typescript=
let numbers: Array<number> = [1, 2, 3, 4, 5];
let names: Array<string> = ["Alice", "Bob", "Charlie"];
```

### prototype

**Array**

Arrayのプロトタイプは、Arrayインスタンスに共通するメソッドやプロパティを定義しています。これにより、すべてのArrayインスタンスでこれらの機能を使用することができます。

以下に、一般的なArrayのプロトタイプメソッドのいくつかを示します。

**map():**
配列の各要素に対して関数を実行し、結果を新しい配列として返します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let doubledNumbers: number[] = numbers.map((num) => num * 2);
```

**filter():**
配列の要素をフィルタリングし、条件に一致する要素を新しい配列として返します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let evenNumbers: number[] = numbers.filter((num) => num % 2 === 0);
```

**reduce():**
配列の要素に対して累積的な操作を実行し、単一の結果を返します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let sum: number = numbers.reduce((acc, num) => acc + num, 0);
```

**forEach():**
配列の各要素に対して関数を実行しますが、新しい配列を返さない点がmap()と異なります。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
numbers.forEach((num) => console.log(num));
```

**find():**
配列の要素の中で、条件に一致する最初の要素を返します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let foundNumber: number | undefined = numbers.find((num) => num > 3);
```

**indexOf():**
配列の中で指定された要素が最初に出現するインデックスを返します。要素が存在しない場合は -1 を返します。

```typescript=
let numbers: number[] = [1, 2, 3, 4, 5];
let index: number = numbers.indexOf(3);
```

**Object**

objectは、キーと値のペアを格納するためのデータ構造です。オブジェクトは、関連するデータや機能を一元的にまとめるために使用されます。オブジェクトのキーは文字列（またはシンボル）で、値はどんな型でも構いません。オブジェクトは{}を使ってリテラルで表現することができます。

**オブジェクトの例：**

```typescript=
const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
  isStudent: false,
};
```
この例では、personオブジェクトには4つのプロパティがあります。それぞれのプロパティは、異なる型の値を持っています（string、number、boolean）。

### スプレッド構文

...（スプレッド構文）は、TypeScript（およびJavaScript）でオブジェクトや配列の要素を展開するために使用されます。スプレッド構文を使うことで、オブジェクトや配列の要素を別のオブジェクトや配列にコピーしたり、関数の引数として渡したりできます。

**配列のスプレッド構文:**
配列の要素を新しい配列に展開できます。これは、配列を結合したり、要素を追加したりする際に便利です。

```typescript=
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
```
また、関数の引数として配列の要素を展開することもできます。

```typescript=
function sum(a: number, b: number, c: number): number {
  return a + b + c;
}

const numbers = [1, 2, 3];
const result = sum(...numbers); // 6
```

**オブジェクトのスプレッド構文:**
オブジェクトのプロパティを新しいオブジェクトに展開できます。これは、オブジェクトをマージしたり、プロパティを追加したりする際に便利です。

```typescript=
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const combinedObject = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 3, d: 4 }
```
オブジェクトのスプレッド構文を使用する際、プロパティ名が重複する場合は後のオブジェクトのプロパティで上書きされます。

```typescript=
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const combinedObject = { ...obj1, ...obj2 }; // { a: 1, b: 3, c: 4 }
```

スプレッド構文は、オブジェクトや配列の操作を簡潔で分かりやすい形で記述するのに役立ちます。ただし、大規模なデータ構造に対してスプレッド構文を使用すると、パフォーマンス上の問題が発生することがあるため注意が必要です。

第四章：ArrayとObject

## 第五章：型定義

TypeScriptの型定義は、変数、関数の引数、関数の戻り値、オブジェクトのプロパティ、クラスのメンバーなどの型を明示的に指定する方法です。型定義は、コードの品質を向上させ、コンパイル時や開発時に型に関連するエラーを検出するのに役立ちます。型定義を使用することで、TypeScriptは型安全を提供し、バグの発生を減らすことができます。

以下は、TypeScriptで使用される一般的な型定義の例です。

**変数の型定義:**


```typescript=
let age: number = 25;
let name: string = "Alice";
let isActive: boolean = true;
```

**関数の引数と戻り値の型定義:**
- 関数の引数と戻り値の型を定義している
- 関数については後述
```typescript=
function add(a: number, b: number): number {
    return a + b;
}
```

**オブジェクトの型定義:**
```typescript=
let person: {
    name: string;
    age: number;
} = {
    name: "Alice",
    age: 25,
};
```

### 型の作り方

TypeScriptでは、独自の型を定義するためにいくつかの方法があります。主な方法は以下の通りです。

**型エイリアス (Type Alias):**
既存の型に新しい名前を付けることができます。これにより、独自の型を簡単に作成することができます。

```typescript=
type UserID = string;
type Age = number;

let id: UserID = "user123";
let age: Age = 25;
```

**インターフェイス (Interface):**
オブジェクトの構造やクラスが実装すべき契約を定義するために使用されます。これにより、オブジェクト間の互換性を確保することができます。

```typescript=
interface User {
    id: string;
    name: string;
    age: number;
}

let user: User = {
    id: "user123",
    name: "Alice",
    age: 25,
};
```

**ジェネリック型 (Generics):**
型を引数として渡すことができる抽象的な型定義です。これにより、再利用可能なコードを記述し、型安全性を保つことができます。

```typescript=
function identity<T>(arg: T): T {
    return arg;
}

let output1: string = identity<string>("Hello");
let output2: number = identity<number>(42);
```

**ユニオン型 (Union Type) と インターセクション型 (Intersection Type):**
ユニオン型は、複数の型のいずれかを表す型定義です。
インターセクション型は、複数の型を組み合わせた型定義です。

```typescript
// Union Type
type StringOrNumber = string | number; 
let a: StringOrNumber = 3
let b: StringOrNumber = "test"
let c: StringOrNumber = [1, 3] // error


interface A {
    propA: string;
}

interface B {
    propB: number;
}

type C = A & B; // Intersection Type

let obj: C = {
    propA: "Hello",
    propB: 42,
};
```

### interfaceとtype

interfaceとtypeは、カスタム型を定義するための2つの主要な方法です。両方とも似た機能を提供しますが、いくつかの違いがあります。

**interface:**
オブジェクトの構造やクラスが実装すべき契約を定義するために使用されます。
インターフェイスは実行時には存在しないため、コンパイル後のJavaScriptコードには影響しません。
インターフェイスは、宣言のマージをサポートしています。同じ名前で複数のインターフェイスを宣言すると、それらは自動的にマージされます。

```typescript=
interface User {
    id: string;
    name: string;
}

interface User {
    age: number;
}

// 結果:
// interface User {
//     id: string;
//     name: string;
//     age: number;
// }
```

**type:**
既存の型に新しい名前を付けることができます。これにより、独自の型を簡単に作成することができます。
typeは、より柔軟で高度な型定義をサポートしています。例えば、ユニオン型、インターセクション型、タプル型、マップ型などを使用できます。
typeは、宣言のマージをサポートしていません。しかし、&演算子を使って明示的にインターセクション型を作成できます。
```typescript=
type UserID = string;

type User = {
    id: UserID;
    name: string;
    age: number;
};

type Admin = User & {
    role: string;
};
```
interfaceとtypeのどちらを使用するかは、開発者の好みやプロジェクトの要件によって異なります。一般的には、オブジェクトの構造を定義する場合やクラスのインターフェイスを作成する場合にはinterfaceを使用し、より複雑で柔軟な型定義が必要な場合にはtypeを使用します。

### OmitとPick

OmitとPickは、ユーティリティ型と呼ばれる組み込みの型機能です。これらは、既存の型から新しい型を作成する際に便利な機能を提供します。

**Pick:**
既存の型から、特定のプロパティのみを抽出して新しい型を作成します。Pickは2つの型パラメータを取ります。最初の型パラメータは元の型であり、2番目の型パラメータは抽出するプロパティ名の集合です。

```typescript=
interface Person {
    id: string;
    name: string;
    age: number;
}

type PersonNameAndAge = Pick<Person, "name" | "age">;

// 結果:
// type PersonNameAndAge = {
//     name: string;
//     age: number;
// }
```

**Omit:**
既存の型から、特定のプロパティを除外して新しい型を作成します。Omitは2つの型パラメータを取ります。最初の型パラメータは元の型であり、2番目の型パラメータは除外するプロパティ名の集合です。

```typescript=
interface Person {
    id: string;
    name: string;
    age: number;
}

type PersonWithoutID = Omit<Person, "id">;

// 結果:
// type PersonWithoutID = {
//     name: string;
//     age: number;
// }
```

PickとOmitは、型の変更や拡張が頻繁に行われる大規模なプロジェクトで特に役立ちます。これらを使用することで、簡潔で再利用可能な型定義を作成し、コードの可読性と保守性を向上させることができます。

### オプショナル

オプショナル（optional）という概念を使用して、特定のプロパティや関数パラメータが存在しなくても良いことを示すことができます。オプショナルなプロパティやパラメータは、型の後に?を追加することで表現されます。

**オプショナルなプロパティを持つオブジェクト型:**
オブジェクト型のプロパティに?を追加することで、そのプロパティが存在しなくても良いことを示すことができます。

```typescript=
interface User {
  id: string;
  name: string;
  age?: number; // オプショナルなプロパティ
}

const user1: User = {
  id: "123",
  name: "Alice",
  age: 30,
};

const user2: User = {
  id: "456",
  name: "Bob",
  // ageプロパティがなくてもエラーにならない
};
```
    
**オプショナルな関数パラメータ:**
関数パラメータに?を追加することで、そのパラメータが省略可能であることを示すことができます。オプショナルなパラメータは、関数の引数として指定されなかった場合、デフォルトでundefinedになります。

```typescript=
function greet(name: string, title?: string): string {
  if (title) {
    return `Hello, ${title} ${name}!`;
  }
  return `Hello, ${name}!`;
}

console.log(greet("Alice")); // "Hello, Alice!"
console.log(greet("Bob", "Mr.")); // "Hello, Mr. Bob!"
```

オプショナルを使用することで、型の柔軟性が向上し、関数やオブジェクトがより多様な状況で使用できるようになります。ただし、オプショナルを過剰に使用すると、型の安全性が低下し、バグの発見が難しくなる可能性があるため、適切なバランスが重要です。

### オプショナルチェイニング

オプショナルチェイニング（Optional Chaining）は、TypeScript 3.7（およびJavaScriptのECMAScript 2020）で導入された機能で、オブジェクト内のネストされたプロパティに安全にアクセスする方法を提供します。オプショナルチェイニングは、?.演算子を使用して表現されます。

オプショナルチェイニングを使用することで、プロパティが存在しない場合にundefinedを返すことができます。これにより、undefinedやnullに対してプロパティを参照しようとしてエラーが発生することを防ぐことができます。

```typescript=
interface Person {
  name: string;
  address?: {
    street: string;
    city: string;
  };
}

const person1: Person = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "New York",
  },
};

const person2: Person = {
  name: "Bob",
};

console.log(person1.address?.city); // "New York"
console.log(person2.address?.city); // undefined
```

上記の例では、person1とperson2のaddressプロパティがオプショナルです。オプショナルチェイニングを使用して、addressが存在する場合にのみcityプロパティにアクセスします。addressが存在しない場合（person2の場合）、式はundefinedを返します。

オプショナルチェイニングを使用することで、プロパティが存在しない場合に安全にアクセスでき、undefinedやnullをチェックするための冗長なコードを減らすことができます。

第五章：型定義

## 第六章：関数

関数を定義するために名前付き関数（Function Declaration）とアロー関数（Arrow Function）の2つの異なる方法があります。それぞれの構文と特徴について説明します。

**名前付き関数（Function Declaration）:**
名前付き関数は、関数名が明示的に与えられる関数定義です。関数名は、関数の呼び出しや再帰的な呼び出しに使用されます。
名前付き関数は、宣言される前に呼び出すことができます（関数の巻き上げ（hoisting）が発生するため）。
```typescript=
function greet(name: string): string {
  return `Hello, ${name}!`;
}

const greeting = greet("Alice");
```

**アロー関数（Arrow Function）:**
アロー関数は、より短い構文で関数式を定義するためのES6の新機能です。アロー関数は、=記号を使って定義されます。
アロー関数は、名前付き関数と異なり、自動的に周囲のスコープのthisをキャプチャします。これは、thisを明示的にバインドする必要がないことを意味します。
アロー関数は、関数の巻き上げ（hoisting）が発生しないため、定義される前に呼び出すことはできません。
```typescript=
const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

const greeting = greet("Alice");
```

### 具体的な例

以下の例では、Personインターフェイスを使用して、getFullNameアロー関数で処理されるオブジェクトの型を定義しています。また、オプショナルなmiddleNameプロパティも含まれています。

```typescript=
interface Person {
  firstName: string;
  lastName: string;
  middleName?: string;
}

const getFullName = (person: Person): string => {
  if (person.middleName) {
    return `${person.firstName} ${person.middleName} ${person.lastName}`;
  }
  return `${person.firstName} ${person.lastName}`;
};

const person1: Person = {
  firstName: "Alice",
  lastName: "Smith",
};

const person2: Person = {
  firstName: "Bob",
  lastName: "Johnson",
  middleName: "Charles",
};

console.log(getFullName(person1)); // "Alice Smith"
console.log(getFullName(person2)); // "Bob Charles Johnson"
```

この例では、getFullName関数はPersonインターフェイスに従うオブジェクトを引数として受け取り、オプショナルなmiddleNameプロパティが存在する場合と存在しない場合の両方を処理します。middleNameが存在する場合、それを含んだフルネームを返し、存在しない場合は、ファーストネームとラストネームのみを返します。

第六章：関数

#### 目標
- Golangの歴史をさらっと知る
- 環境構築を一緒にやる

#### 内容
- 1-1 Goの歴史をさらっと知る
[この記事を一緒に読もう](https://qiita.com/nemui_/items/11ba7e71fa0081b3d0d3)
- 1-2 githubリポジトリの作成　[参考](https://docs.github.com/ja/get-started/quickstart/create-a-repo)
    - githubの右上の+ボタンをクリックして、new repositoryをクリック。
    - リポジトリの名前(repository name)と説明(description)を記入する。今回は名前を**go_learn**とする。
    - 一番下のcreateボタンを押してリポジトリを作成する。
    - 画面にでてきたコマンドをターミナルで実行するとセットアップが完了する。
    -  Settingsを押し、Collaboratorsから名前検索でメンターを追加する。終わり！

- 1-3 vscodeのインストール　[参考](https://www.javadrive.jp/vscode/install/index1.html)
    - [公式サイト](https://code.visualstudio.com/#alt-downloads)に飛んで自分のデバイスに合わせてダウンロードする。
    - ダウンロードされたらインストーラを起動してインストールを開始する。特に設定することはないので次へ押しとけばok
    - vscodeを起動してサイドバーにある拡張機能(Extensions)を押して**Japanese Language Pack**、**Go**、**WSL**をそれぞれインストールして終わり！
- 1-4 Goのインストール　[参考](https://took.jp/golang-hello-world/)
    - [公式サイト](https://go.dev/)からDownloadを押して自分のデバイスにあったインストーラを選択する。
    - ダウンロードされたらインストーラを起動してインストールして終わり！
- 1-5 Dockerで環境構築
- ディレクトリ構成(第３章も兼ねてちょっと複雑になります)
    go_learn
    .
    ├── docker-compose.yml
    ├── .Docker
    └── app.Dockerfile
        
    - メンターさんが環境構築issueを立てる(やらんなくてもいいかも)
    - コマンドで環境構築issueに移動する。
    `git switch -c <issue名>`
    - go_learnフォルダを作成し、移動する。(以下の作業はvscodeで行っても良き)
    ```
    mkdir go_learn
    cd go_learn
    ```
    - **docker-compose.yml**と.dockerフォルダの中に**api.Dockerfile**を作成する。
    ```
    touch docker-compose.yml
    
    mkdir .docker
    cd .docker
    touch app.Dockerfile
    ```
    - app.Dockerfile、docker-compose.ymlの中身を記入する。
    ```
    #Dockerfile
    # Go-version
    FROM golang:1.19.1-alpine
    # アップデートとgitのインストール！！
    RUN apk update && apk add git
    # appディレクトリの作成
    RUN mkdir /go/src/app
    # ワーキングディレクトリの設定
    WORKDIR /go/src/app
    # ホストのファイルをコンテナの作業ディレクトリに移行
    ADD . /go/src/app
    ```
    ```
    #docker-compose.yml
    version: "3" # composeファイルのバージョン
    services: 
        app: # サービス名
            container_name: go_learn
            build: #Dockerfileの場所
                context: .docker
                Dockerfile: app.Dockerfile
            tty: true # コンテナの永続化
            volumes:
                - ./app:/go/src/app # マウントディレクトリ
    ```
    - buildしてみる
    ```
    #イメージのビルド
    docker-compose build --no-cache
    #成功するとappフォルダが作成されるのでその中でhello.goの作成
    #vscodeで作成してもよき
    touch app/hello.go
    # エラーがでたら以下を実行
    sudo chmod -R 777 ./
    ```
    - hello.goにサンプルコードを書く
    ```
    package main

    import "fmt"

    func main() {
        fmt.Println("Hello, World from docker!")
    }
    ```
    - コンテナを立ち上げて実行してみる。
    ```
    # コンテナの立ち上げ
    docker compose up -d
    #作成したファイルの実行
    go run app/hello.go
    #コンテナ閉じるとき
    docker compose down
    ```
    - appフォルダの中にlearn(サンプルコード置き場)とhomework(宿題提出用)フォルダを作成して終わりです！！お疲れさまでした！
- 1-3 第一章まとめ
    - GoはGoogleによって作られたプログラミング言語であり、C言語を参考にして開発された。
    - Googleでの不満解消のために作られたGoの特徴は処理が速いことと可読性が高い(コードが読みやすい)
    - dockerという仮想環境でgoの環境構築ができた
    - 実際にGoの環境構築したので一人でコードを書いて動かしてみてもいいかも
    - ファイル作成するときは後ろに.goを付ける。そうしないとgoですよって認知されない

第１章　はじめに goの紹介と環境構築

第２章　Goを知ろう

#### 目標
- GoでのCRUD操作を知る
- echo,swaggerを用いた簡単(多分)なCRUD操作ができるアプリを制作してみる。
- これでフレームワークやGoサーバーの雰囲気を掴んでほしい
[完成例](https://github.com/hikahana/go_learn_answer)
#### 内容
- 3-0 今回使用するものの紹介
    - その１ echo
        - LabStackによって管理される軽量のWebアプリケーションフレームワーク。
        - シンプルな設計なので速度が速く、簡単に拡張することができる。
    - その２　swagger
        - OpenAPIを利用したREST APIを定義するための仕様に基づいて製作されたツールセット。
        - ツールはEditer,UI,Codegenの三種類あり、今回はUIというドキュメントの表示を使う。
        - ドキュメント(フロントエンド)部分を簡単に書けて即座に実装できてとても快適。
    - その３ air
        - Goのホットリロードツール。
        - これを実装することでdockerを立ち上げたままでも変更点の修正を即座に行ってくれる。
    - その４ MVCモデル
        - 役割ごとにプログラムを分け手管理するソフトウェア設計モデル。
        - Model,View,Controllerの頭文字をとってMVCモデル。
            - ModelはDBとのやり取りをする部分を担当し、結果をControllerに投げる。
            - ControllerはModelとViewの制御を担当し、それぞれに指示を送る。
            - Viewは表示部分のインターフェイスを担当しているが、今回はswaggerがviewになる。 
- ディレクトリ構成
	go_learn/
|-- api
|   |-- api
|   |-- controller
|   |   |-- user.go
|   |
|   |-- docs
|   |   |-- docs.go
|   |   |-- swagger.json
|   |   |-- swagger.yaml
|   |
|   |-- go.mod
|   |-- go.sum
|   |-- main.go
|   |-- model
|   |   |-- server.go
|   |   |-- user.go
|
|-- app
- 3-1 go(echo,airの導入)とdbの環境構築
    - 新たにapi.Dockerfileを作成して、api.Dockerfileとdocker-copose.ymlに以下を追記する。
    #api.Dockerfile
    ```
    FROM golang:latest

    RUN apt-get update
    RUN apt-get upgrade -y
    RUN apt-get install -y locales \
      && locale-gen ja_JP.UTF-8 \
      && echo "export LANG=ja_JP.UTF-8" >> ~/.bashrc
    
    #言語を日本語に変更する
    RUN export LANG=C.UTF-8
    RUN export LANGUAGE=en_US:

    ENV CGO_ENABLED=0
    ENV GOOS=linux
    #ENV GOARCH=amd64

    RUN mkdir /go/src/api

    WORKDIR /go/src/api

    #swaggerとairのインストール
    RUN go install github.com/swaggo/swag/cmd/swag@latest
    RUN go install github.com/cosmtrek/air@latest
    CMD ["air", "-c", ".air.toml"]
    ```
    #docker-compose.yml
    ```
    #appの下に追加
      db:
        image: mysql:8.0
        container_name: 'db'
        volumes:
          - ./mysql/db:/docker-entrypoint-initdb.d # 初期データ
        command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
        environment: #databaseのユーザー情報を定義
          MYSQL_DATABASE: goleran_db
          MYSQL_USER: golearn
          MYSQL_PASSWORD: password
          MYSQL_ROOT_PASSWORD: root
          TZ: 'Asia/Tokyo'
        ports:
          - '3306:3306'
        restart: always

      api:
        container_name: 'api'
        build:
          context: .docker
          dockerfile: api.Dockerfile
        volumes:
          - ./api:/go/src/api
        environment:
          ADMIN_NAME: admin
          ADMIN_PASS: password
        ports:
          - '1323:1323'
        command: './start.sh'
        depends_on:
          - 'db'
        tty: true
        stdin_open: true
    ```
    - buildして、下記を実行する
    ```
    docker-compose build
    
    #apiフォルダが作成されたら
    cd api
    
    #権限を付与してファイルの作成を行えるようにする
    sudo sudo chmod -R 777 ./ 
    go mod init
    go mod tidy
    
    #下記はvscodeで作成しても良き
    touch main.go 
    touch .air.toml
    ```
    - main.goと.air.tomlの中身を記述する
    #main.go
    ```
    package main

    import (
        "net/http"

        "github.com/labstack/echo/v4"
    )

    func main() {
        #echoを起動
        e := echo.New()
        #path指定して処理を実行させる
        e.GET("/", func(c echo.Context) error {
            return c.String(http.StatusOK, "Hello, World!")
        })
        #ポートを開く、docker-compose.ymlと同じポート番号にする
        e.Logger.Fatal(e.Start(":1323"))
    }    
    ```
    #.air.toml
    ```
    #ほぼ初期設定
    root = "."
    testdata_dir = "testdata"
    tmp_dir = "tmp"

    [build]
      args_bin = []
      bin = "./tmp/main"
      cmd = "go build -o ./tmp/main ./main.go"
      delay = 1000
      exclude_dir = ["assets", "tmp", "vendor", "testdata"]
      exclude_file = []
      exclude_regex = ["_test.go"]
      exclude_unchanged = false
      follow_symlink = false
      full_bin = ""
      include_dir = []
      include_ext = ["go", "tpl", "tmpl", "html"]
      kill_delay = "0s"
      log = "build-errors.log"
      send_interrupt = false
      stop_on_error = true

    [color]
      app = ""
      build = "yellow"
      main = "magenta"
      runner = "green"
      watcher = "cyan"

    [log]
      time = false

    [misc]
      clean_on_exit = false

    [screen]
      clear_on_rebuild = false
    ```
    - dockerを起動して動作確認してみる
    ```
    docker-compose up
    
    #タブを開いて
    http://localhost:1323/
    
    hello world と表示されていたら成功！
    
    #apiディレクトリの中にgo.modファイルを作成する
    go mod init go_learn/api
    go mod tidy
    ```
- 3-2 GORMを使用してdbと接続する
    - 今回はMVCモデルで構築するのでmodelフォルダを作成してserver.goを作成する。
    ```
    # vscodeで作成してもよき
    mkdir model
    cd model
    touch server.go
    ```
    - server.goに以下を記述する。
    - dsnの定義は、user_name:user_password@ycp(ymlに書いたservice名:ポート番号)/database_name?のように記述する。
    #server.go
    ```
    package model

    import (
        "log"

        "gorm.io/driver/mysql"
        "gorm.io/gorm"
    )

    var DB *gorm.DB
    var err error

    func init() {
        dsn := "golearn:password@tcp(db:3306)/golearn_db?charset=utf8mb4&parseTime=True&loc=Local"
        DB, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
        if err != nil {
            log.Fatalln(dsn + "database can't connect")
        }
    }
    ```
    - main.goを変更して、dbに接続できるか確認する。
    #main.go
    ```
    package main

    import (
        "net/http"

        "github.com/labstack/echo/v4"
        
        #ここは個人のやつに合わせて変更してね
       "github.com/hikahana/go_learn_answer/api/model"
    )

    func connect(c echo.Context) error {
        db, _ := model.DB.DB()
        defer db.Close()
        err := db.Ping()
        if err != nil {
            return c.String(http.StatusInternalServerError, "DB接続失敗しました")
        } else {
            return c.String(http.StatusOK, "DB接続しました")
        }
    }

    func main() {
        e := echo.New()
        e.GET("/", connect)
        e.Logger.Fatal(e.Start(":1323"))
    }
    ```
    
    ```
    #gormモジュールのパスを設定する
    go mod tidy
    
    #main.goを変更したら
    docker-compose up 
    
    #エラーが出なかったら
    http://localhost:1323/
    
    #エラーがでたらわかんない。downしてもう一回upしたらいくかも？　
    
    DB接続しました　が表示されたらok    
    ```
- 3-3 echo-swaggerの導入
    - フロントの部分を今回はecho-swaggerで定義していきます。
    - main.goに設定コメントをつける
    #main.go
    ```
    import (
        echoSwagger "github.com/swaggo/echo-swagger"
    )
    
    type (
	Response struct {
		Int64  int64  `json:"int64"`
		String string `json:"string"`
		World  *Item  `json:"world"`
	}

	Item struct {
		Text string `json:"text"`
	}
    )

    // @title go_learn API
    // @version 1.0
    // @description go_learn API
    // @host localhost:1323
    // @BasePath /
    // @schemes http

    #func main()の上にコメントを付ける
    func main() {
    
    ```
    - swagコマンドで自動生成を行う。
    ```
    #main.goがあるパスでやる必要がある。
    cd go_learn/api
    
    swag init
    
    #行かない場合
    #goの環境変数先(GOPATH)を確認する
    go env
    export PATH="(GOPATH)/bin:$PATH"
    source ~/.bashrc
    swag -v
    #これでもいかないならお手上げ手入力でもするか？
    ```
    - main.goにswaggerコマンドを追加する。
    ```
    import (
        "github.com/(github名)/go_learn/api/docs"
    )
    
    func main() {
        e.GET("/swagger/*", echoSwagger.WrapHandler)
    }
    ```
    - コンテナを立ち上げてswaggerを確認しよう！
    ```
    docker-compose up
    
    http://localhost:1323/swagger/index.html
    
    #確認出来たら
    ctrl + c
    docker-compose down 
    ```
    - 適宜docs.goに追記していきます。
- 3-4 CRUDの実装を行う。Create編
    - usersテーブル構造体を定義して、gormでusersテーブルを作成する。
    - modelフォルダの中にuser.goを作り、以下を記述する。
    ```
    #vscodeでもよき
    cd model
    touch user.go
    ```
    #model/user.go
    ```
    package model

    import "time"

    type User struct {
        ID        uint      `json:"id" param:"id" gorm:"primary_key"`
        Name      string    `json:"name"`
        CreatedAt time.Time `json:"created_at"`
        UpdatedAt time.Time `json:"updated_at"`
    }
    ```
    - server.goにテーブル作成コマンドを追加する。
    ```
    func init() {
        dsn := "golearn:password@tcp(db:3306)/golearn_db?charset=utf8mb4&parseTime=True&loc=Local"
        DB, err = gorm.Open(mysql.Open(dsn), &gorm.Config{})
        if err != nil {
            log.Fatalln(dsn + "database can't connect")
        }
        #ここを追加する。
        DB.AutoMigrate(model.User{})
    }

    ```
    - Create処理を作成する。
    - controllerフォルダを作成して、user.goにCreate処理を記述する。
    ```
    #vscodeでも良き
    mkdir controller
    cd controller
    touch user.go
    ```
    #controller/user.go
    ```
    package controller

    import (
        "net/http"

        "github.com/labstack/echo/v4"
        "github.com/hikahana/go_learn_answer/api/model"
    )

    func CreateUser(c echo.Context) error {
        nema := c.queryParam("name")
        
        user := model.User{
            Name: name,
        }
        if err := c.Bind(&user); err != nil {
            return err
        }
        model.DB.Create(&user)
        return c.JSON(http.StatusCreated, user)
    }
    ```
    - main.goとdocs.goにcreate部分を追加する。
    #main.go
    ```
    e.POST("/users", controller.CreateUser)
    ```
    #docs.go
    ```
    #paths  /heelo-worldの下に追加する。
    #セミコロン(,)をparameterとpathの終わりにつける！！
    "/users": {
        "post": {
            "description": "write on username",
            "parameters": [
                {
                    "name": "name",
                    "type": "string",
                    "in": "query",
                    "description": "ユーザー名",
                }
            ],
            "responses":{
                "200":{
                "description":"Created user",
                }
            }
        }
    },
    ```
    - コンテナを立ち上げて、create処理をやってみる。
    ```
    docker-compose up
    
    http://localhost:1323/swagger/index.html
    
    #うまくいってるとPOSTが追加されてる
    #try itを押してユーザー名を入れてExcuteで実行する。
    
    #下記みたいになってたら成功！
    Respose body
    {
      "id": 3,
      "name": "test",
      "created_at": "2023-04-10T04:50:00.364Z",
      "updated_at": "2023-04-10T04:50:00.364Z"
    }
    
    #確認出来たら
    ctrl + c
    docker-compose down
    ```
    
- 3-5 CRUDの実装を行う。Read編
    - Read(GET)の処理を記述してpostで追加したユーザー情報を確認していきます。
    - controller/user.goにread処理を記述する。
    - readは全ユーザーとID検索で一人だけを抽出する二つの関数を追記する。
    #controller/user.go
    ```
    #Createuserの下に記述
    #全ユーザーを取得
    func GetUsers(c echo.Context) error {
	users := []model.User{}
	model.DB.Find(&users)
	return c.JSON(http.StatusOK, users)
    }

    #ユーザーIDから一件のみを取得
    func GetUser(c echo.Context) error {
        user := model.User{}
        if err := c.Bind(&user); err != nil {
            return err
        }
        model.DB.Take(&user)
        return c.JSON(http.StatusOK, user)
    }
    ```
    - main.goとdocs.goにread部分を追記する。
    #main.go
    ```
    e.GET("/users", controller.GetUsers)
    e.GET("/users/:id", controller.GetUser)
    ```
    #docs.go
    ```
    "/users": {
        "post": {
        #省略
        }
        #ここに全ユーザ取得を追加する。
        "get": {
            "description": "show users",
            "responses":{
                "200":{
                "description":"Created user",
                "schema":{
                    "type":"array",
                    }
                }
            }
        }
    },
    #"users"の下に"users/{id}"を追加する。
    "/users/{id}": {
        "get": {
            "description": "show users",
            "responses":{
                "200":{
                "description":"Created user",
                "schema":{
                    "type":"array",
                    }
                }
            }
        }
    }
    ```
    - 確認する
    ```
    docker-compose up
    
    http://localhost:1323/swagger/index.html
    
    #うまくいってるとPOSTの下にGETが追加されてる
    #try itを押してユーザー名を入れてExcuteで実行する。
    
    #確認出来たら
    ctrl + c
    docker-compose down
    ```
- 3-6 CRUDの実装を行う。Update編
    - ユーザー名に変更があったときにIDを指定して情報を書き換えられるようにupdate処理を追記する。
    - controller/user.goにupdate処理を追記する。
    #controller/user.go
    ```
    func UpdateUser(c echo.Context) error {
	id, _ := strconv.Atoi(c.Param("id"))
	name := c.QueryParam("name")

	user := model.User{
		ID: uint(id),
		Name: name,
		CreatedAt: time.Now(),
		UpdatedAt: time.Now(),
	}
	if err := c.Bind(&user); err != nil {
		return err
	}
	model.DB.Save(&user)
	return c.JSON(http.StatusOK, user)
    }
    ```
    - main.goとdocs.goにupdate部分を追加する。
    #main.go
    ```
    e.PUT("/users/:id", controller.UpateUser)
    ```
    
    #docs.go
    ```
    #"users/:id": {
        "get": {　の下に追加する。
        },
        "put": {
            "description": "change on username",
            "parameters": [
                {
                    "name": "id",
                    "type": "integer",
                    "in": "path",
                    "description": "ユーザーID",
                    "required": true,
                },
                {
                    "name": "name",
                    "type": "string",
                    "in": "query",
                    "description": "ユーザー名",
                }
            ],
            "responses":{
                "200":{
                "description":"Updated user",
                }
            }
        },
    ```
    - 確認してみる。
    ```
    docker-compose up
    
    http://localhost:1323/swagger/index.html
    
    #うまくいってるとusers/:idのGETの下にあると思う。
    #try itを押してidと変更したいユーザー名を入れてExcuteで実行する。
    #実行したらusersのGETを実行して変更されているか見てみよう！
    
    #確認出来たら
    ctrl + c
    docker-compose down
    ```
- 3-7 CRUDの実装を行う。Delete編
    - ユーザーを誤って作成してしまった！このユーザーはもう必要なしとなったときにIDを指定して情報を削除できるようにする。
    - controller/user.goにdelete処理を記述する。
    #controller/user.go
    ```
    func DeleteUser(c echo.Context) error {
	id, _ := strconv.Atoi(c.Param("id"))

	user := model.User{
		ID: uint(id),
	}
	if err := c.Bind(&user); err != nil {
		return err
	}
	model.DB.Delete(&user)
	return c.JSON(http.StatusOK, user)
    }
    ```
    - main.goとdocs.goにdelete部分を追記する。
    #main.go
    ```
    e.DELETE("user/:id" ,controller.DeleteUser)
    ```
    #docs.go
    ```
    #"users/:id"のところに追記する
    "delete": {
        "description": "change on username",
        "parameters": [
            {
                "name": "id",
                "type": "integer",
                "in": "path",
                "description": "ユーザーID",
                "required": true,
            }
        ],
        "responses":{
            "200":{
            "description":"Updated user",
            }
        }
    },
    ```
    - 確認してみる。
    ```
    docker-compose up
    
    http://localhost:1323/swagger/index.html
    
    #うまくいってるとusers/:idのところにある。
    #try itを押してidを入れてExcuteで実行する。
    #実行したらusersのGETを実行して削除されているかを確認する。
    
    #確認出来たら
    ctrl + c
    docker-compose down
    ```
    - 完成です！お疲れさまでした！！

第３章　GOでCRUDサーバーを立ててみよう

## 1. Gitとはなにか？

gitとは、分散型バージョン管理システムである。


分散型バージョン管理システムとは、上記の画像のようにリモートリポジトリをサーバー上に置き、開発者それぞれがローカルリポジトリを持つ構成になっている。

それにより、普段はローカルリポジトリに反映し、ある程度の作業が完了したらリモートリポジトリに反映させる使い方が可能である。

また、大きな規模のソフトウェアの場合でもチームでも利用することができる。

👉簡単にいえば、ファイルをサーバー上で保存することで、バックアップ・復元・チームでの共同開発することができると考えればOK


## 2. Gitの歴史

Gitは世界最大級のossの1つであるLinuxのカーネルのソースコードを効率的に管理するためにつくられた。

しかし、Gitの分散バージョン管理システム以前はローカル・バージョン管理システムや集中管理システムというものが存在した。

### ローカル・バージョン管理システム

- バージョン管理下のファイルに対するすべての変更を保持するシンプルなデータベース
- ファイル間の差分の集合を特殊なフォーマットでディスク上に保持するという仕組みで動いている
- RSC(Revision Control System)が有名

### 集中バージョン管理システム

- ローカルではなく、ネットワーク上にあるサーバーに変更をコミットしていく形式
- プロジェクトの他の開発者が何をしているのか、全員がある程度わかる
- しかしながら、クライアントがオフラインであったり、サーバーがなんらかの理由で障害を起こすと開発を継続できなくなる

### 分散バージョン管理システム

- 最近の主流. Gitもこれ
- 特定のファイルやディレクトリをコピーするのではなく、リポジトリ全体をクライアントにミラーリングするために、ローカルでも履歴を持つことができる
- ローカルで履歴をもつことができるため、ローカルでコミットすることが可能

👉現在は分散バージョン管理システムが利用されていることがわかればOK


git-curriculumその1

### 3.1 初期設定

コミットに記録される名前とメールアドレスを設定する
```
$git config –global user.name “Your name”
$git config –global user.email “Your email”
```

### 3.2 ローカルにリポジトリを作成する

`git init` によって新しいリポジトリの初期セットアップが完了する

- `.git` が作成される
- 新しく`main`が作成される

```
$mkdir ~/works/git-sample
$cd ~/works/git-sample
$git init
```

### 3.3 ファイルを追加する

`git add` によって差分ファイルをステージングする

`git commit -m “message”` によってステージングしたファイルをcommit(save)する

```
$echo “#README” > README.md
$git add README.md
$git commit -m “Add README.md”
```

### 3.4 3つのエリア

- Working Directory
    - ディスク上に配置されていファイル群がある場所
- Staging Area
    - 次のコミットに含まれる情報が蓄えられている場所
- Repository
    - リポジトリのデータベース
    - メタデータやオブジェクトなどが格納されている。

### 3.5 リモートリポジトリにpushする

commitしたファイルをリモートリポジトリにpushする

まずは、githubにリモートリポジトリを作成する。(githubアカウントを作成していない場合は作成する。)

また、githubとのSSH接続も完了させておく。以下資料が参考になる。
https://qiita.com/shizuma/items/2b2f873a0034839e47ce


Repositoryの緑色のボタンNewを押す。
その後以下を入力

- `Repository`→ git-sample
- `Description`→ git練習ディレクトリ
- Public
    - もし、他人に公開したくないディレクトリの場合はPrivateにする

→`Create Repository`

- masterからmainにbranchを変更する。branchの説明は次に行う

`$git branch -M main`

- リモートリポジトリとローカルリポジトリを接続する

`$git remote add origin git@github.com:username/git-sample.git`

- リモートリポジトリとの接続を確認する

```
$git remote -v
>>origin	git@github.com:username/git-sample.git (fetch)
>>origin	git@github.com:username/git-sample.git (push)
```

- 3.3でcommitしたファイルをpushする

**`-u`** オプションを使用すると、このブランチが「upstream branch」に設定されます。つまり、次回以降に **`git push`** コマンドを実行する場合、ローカルの現在のブランチを origin の main ブランチに自動的にプッシュすることができます。

👉最初だけつけるおまじないだと思っておこう！

`git push -u origin main`

### 3.6 branch

本流(main)から分岐して履歴を記録することができる機能

複数のブランチを作成することができ、複数の機能を同時並行で開発することが可能なので、チーム開発の効率を向上させる

- branchの一覧を確認するコマンド
    - `$git branch`
- 新規branchを作成する
    - `$git switch -c new-feature`
- branchを移動する
    - `$git switch feature`

branchを切ってリモートリポジトリにpushまでしてみよう!
```
# 新規ブランチ作成
$git switch -c feat-git-1

# main.pyを作成
$echo hello world > main.py

# 差分を確認
$git status

# ステージング
$git add main.py

# コミット
$git commit -m "【Create】main.py"

# リモートリポジトリにpush
$git push origin feat-git-1
```



git-curriculumその2

## 4. Pull Requestを書いてみよう

### 4.1 Pull Requestとは何か

PullRequest(PR, プルリク)とは自分が書いたソースコードを他人にレビューしてもらい、リポジトリに取り込んでもらうように依頼すること

### 4.2 なぜ必要なのか

レビューしてもらうことで、ソースコードのCheckや動作Checkをすることでリポジトリにコードを取り込む前にバグを発見することができる。

### 4.3 どんなことを書くのか

例として以下のようなことを書く

- なぜそのタスクをやったか、実装したか
    - そのタスクをやった目的を明確に書く必要がある
- 変更点
    - 実装したことで、何ができるようになったか、何が変わったかをかく。
- test項目
    - 何を満たしていればそのPRをmergeすることができるのか
- 動作確認
    - どうすれば動作を確認できるかかく
- 備考欄
    - 注意点や困ったことを書く

### 4.4 実際にPRを書いてみよう

branchを切ってpushすると、以下のようになっている。
Compare & pull requestを押す。もし、ない場合はNew pull requestを押してみると、以下のようになっている。→ Create pull requestを押す。　

以下のようにかいてみて、`Create pull request`を押す。

reviewerは今回は設定しない。チーム開発だとメンバーを指定する。

```
## やったこと
main.pyの作成

## なぜ行ったか
pull requestを書く練習

## 動作Check
特になし

## test項目
pull requestを出ていればOK
```


git-curriculumその3

## 5. merge

### 5.1 mergeとは

レビューしたらmergeする。

mergeとは、変更した差分をbaseに設定したブランチに取り込むことである。

間違ったソースコードやバグも取り込まれるので、責任持ってmergeする

### 5.2 mergeする

`Merge pull request`を押せばOK

mainブランチにmain.pyが追加されていればOK

git-curriculumその4

## 6 ローカルに反映する

リモートでmergeしたmainブランチをローカルにも反映させよう。

```bash
## 現在いるbranchを確認。何もしていない場合はfeat-git1にいるはず
$git branch

## mainブランチに移動する
$git switch main

## リモートのmainブランチの差分を取り込む
$git pull origin main

# 以下実行結果
remote: Enumerating objects: 1, done.
remote: Counting objects: 100% (1/1), done.
remote: Total 1 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (1/1), 645 bytes | 322.00 KiB/s, done.
From github.com:usename/git-sample
 * branch            main       -> FETCH_HEAD
   332c252..94615ae  main       -> origin/main
Updating 332c252..94615ae
Fast-forward
 main.py | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 main.py
```

`ls`コマンドなどでmain.pyが取り込まれていることが確認できたらOK

git-curriculumその5

## 7 コンフリクト

### 7.1 コンフリクトとは何か

チームで開発している時によく発生するのがコンフリクトである。コンフリクトとは、自分が変更した差分`Xファイル`を`A-branch`にmergeする際に、A-branchの`Xファイル`には自分が知らない差分が取り込まれおり、mergeができない状態を指す。

### 7.2 コンフリクトを発生させよう

```
## ブランチを新しく切る
$git switch -c feat-git2

## vimやVscodeでmain.pyを編集してみる
print("git-conflict")

## ステージング
$git add main.py

## commint
$git commit -m "コンフリクト解消練習"

## push
$git push origin feat-git2

## PRを出す
```

この時点ではコンフリクトはまだ発生していない
ここからコンフリクトを起こしてみる。

以下を順に実行してみよう

```
## main ブランチを移動する
$git switch main

## main.pyを適当に編集する

## ステージング
$git add main.py

## commit
$git commit -m "コンフリクトを起こす"

## push
$git push origin main
```
feat-git2で出したPRを見てみよう

### 7.3 github上でコンフリクトを解消する

上記の画像にある`Resolve conflict`を押す。

以下のようになっている。

```
<<<<<<< feat-git2
print("git-conflict")
=======
git sample
>>>>>>> main
```
これを修正する。

mainに直接pushしたところとfeat-git2の両方の部分を残して`Mark as resolve`を押せばOK

```
print("git-conflict")
git sample
```

### 7.4 rebaseでコンフリクトを解消する

rebaseとは現在のブランチのコミット履歴を、別のブランチのコミット履歴にベースを合わせて再構築すること。

👉commitの歴史を書き変えているイメージ

実際にやってみよう(7.3をやってしまった場合は、みるだけでもOK)

```
## ブランチを確認する
$git branch

## mainに移動する
$git switch main

## mainを最新版にする
$git pull origin main

## feat-git2の移動
$git switch feat-git2

## rebaseする
$git rebase main

## 実行結果
Auto-merging main.py
CONFLICT (content): Merge conflict in main.py
error: could not apply 5a6e843... コンフリクト解消練習
Resolve all conflicts manually, mark them as resolved with
"git add/rm <conflicted_files>", then run "git rebase --continue".
You can instead skip this commit: run "git rebase --skip".
To abort and get back to the state before "git rebase", run "git rebase --abort".
Could not apply 5a6e843... コンフリクト解消練習
```

一番上にあるいずれかを選択する

- Accept Current Change→現在の差分を受け入れる
- Accept Incoming Change→きた変化を受け入れる
- Accept Both Changes→両方受け入れる
- Compare Changes→差分を見る

今回はIncoming Changesできた　差分を受け入れる

コンフリクトを解消したら、以下を実行する
```
## git add 
$git add main.py

## commit
$git commit -m "コンフリクト解消する"

## git rebaseを継続する
$git rebase --continue

## force pushする
$git push -f origin feat-git2
```

あとはMergeすればOK

git-curriculumその6

## 8コマンド一覧

- git branch	ブランチ一覧確認
- git branch -a	リモートディレクトリのブランチを含めて確認する
- git switch -c <new-branch>	新規ブランチを作成して移動する
- git switch <branch>	既存のブランチに移動する
-  git add file	差分ファイルをステージングする
- git commit -m “<message>”	ステージングしたファイルをcommitする
- git push origin branch	リモートディレクトリに差分をpushする
- git pull origin branch	リモートディレクトリから指定したbranchの最新状態を持ってくる
- git log	git commitの履歴の確認
- git status	変更ファイルの確認
- git rebase branch	rebaseを行う
- git diff 	差分を確認する


git-curriculumその7

HTML/JS/CSS の自学用の学習記録を残したい時に使用する。

HTML/JS/CSS 自学用チャプター

TypeScript の自学用の学習記録を残したい時に使用する。

TypeScript 自学用チャプター

React.js の自学用の学習記録を残したい時に使用する。

React.js の自学用チャプター

Next.js の自学用の学習記録を残したい時に使用する。

Next.js の自学用チャプター

Vue.js の自学用の学習記録を残したい時に使用する。

Vue.js の自学用チャプター

Nuxt の自学用の学習記録を残したい時に使用する。

Nuxt の自学用チャプター

Go の自学用の学習記録を残したい時に使用する。

Go の自学用カリキュラム

Ruby on Rail の自学用の学習記録を残したい時に使用する。

Ruby on Rail の自学用チャプター

Ruby の自学用の学習記録を残したい時に使用する。

Ruby の自学用チャプター

Linux OSの大まかな仕組み、コマンドについて理解する

Linux

Cloudflare、Tailscaleを通してIP、Port、DNS、プロキシ、VPNを理解する

Network

- Proxmoxを通してVMを理解する
- Docker・Kubernetesなどのコンテナ技術を理解する

Server

Keycloak、Minio、Nginx　など、それぞれの機能を理解

Middleware

- サイトHPやポートフォリオなどのデザイン
- 見た目のデザイン。わかりやすいデザインができる
- ポートフォリオやHPが作れる

webデザイン

- ニーズをもとにサービスを０から作る
- ペルソナ設計ができる
- サービスのシステム的なことを考えられる

UI/UXデザイン・ペルソナ設計

- 名刺などのデザインができる
- 必要な情報の取捨選択、情報を伝えるためのデザイン

制作物デザイン

## 第１章 環境構築
本章では，本カリキュラムを進めるにあたって環境構築をします．
今回は，docker環境を用いずに直接環境を整えます．
(dockerだとうまく動きませんでした．すみません)

- dartのインストール
はじめに，dartを次のようにインストールします．
```
$ sudo sh -c 'wget -qO- https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -'
$ sudo sh -c 'wget -qO- https://storage.googleapis.com/download.dartlang.org/linux/debian/dart_stable.list > /etc/apt/sources.list.d/dart_stable.list'
$ sudo apt-get update
$ sudo apt-get install dart
```

- fvm(flutter)のインストール
dartコマンドを用いて，fvmのインストールをします．fvmはflutterのバージョンを管理するために使用します．
```
$ dart pub global activate fvm
```

fvmへのPATHを通します．
```
export PATH="$PATH":"$HOME/.pub-cache/bin"
```

fvmでインストールされているバージョンの一覧を表示するには，次の通りにできます．
```
$ fvm list

3.3.9 (global)
3.0.5
```

インストール可能なバージョンを表示するには次の通りにします．
```
$ fvm releases
（略）
Nov 23 22  │ 3.3.9
Dec 8 22   │ 3.7.0-1.1.pre
--------------------------------------
Dec 15 22  │ 3.3.10            stable
--------------------------------------
Dec 20 22  │ 3.7.0-1.2.pre
--------------------------------------
Jan 5 23   │ 3.7.0-1.3.pre     beta
--------------------------------------
```

使いたいflutterのバージョンを指定してインストールします．
```
$ fvm install 3.7.5
Flutter "3.7.5" is not installed.

Installing version: 3.7.5...
（略）
Building flutter tool...
Flutter 3.7.5 • channel stable • git@github.com:/flutter/flutter.git
Framework • revision 135454af32 (4 weeks ago) • 2022-12-15 07:36:55 -0800
Engine • revision 3316dd8728
Tools • Dart 2.18.6 • DevTools 2.15.0
```

- flutterのバージョン指定
fvmを用いてflutterをインストールした場合，次の通りに使うバージョンを指定します．
```
$ fvm use 3.7.5

$ fvm use 3.7.5 --force
↑初回のみ(プロジェクトがまだない状態)
```

- flutterのプロジェクトの作成
最後に次のコマンドを入力すると，モバイルアプリのテンプレートが生成されます．「myapp」の部分は任意の名前で大丈夫です．
```
$ fvm flutter create myapp
```

- アプリの実行
生成したモバイルアプリを実行してみましょう．
生成したモバイルアプリのディレクトリに入り，コンパイル・実行をしましょう．正常に動けば，「localhost:5555」にアクセスすることでデフォルトのモバイルアプリが表示されると思います．
```
$ cd myapp/
$ fvm flutter pub get
$ fvm flutter build web
$ fvm flutter run -d web-server --web-port 5555
```



第１章:環境構築

## 目標

- デザインの4原則+αを理解している
- Figmaを不自由なく操作できる
- 配色、書体について基礎的な知識を理解し、論理的に選ぶことができる
- アクセシビリティを理解し、デザインの一般的な流れを知っている
- ハッカソンなどでFigmaを使ってプロダクトのデザインを進められるようになる。
- デザインチームが作ったデザインページを簡単にいじったりできるようになる。

## 成果物
- Figmaアカウント
- 自分用の名刺
- 自分でまとめたデザインセオリー説明書


## はじめに
勉強会は基本的にFigmaで作成した資料を使って進行する。資料を見ていることを前提に、従来口頭での説明で保管していた内容を記述する。

Figmaのアカウント作成後、「NUTMEG」Teamsに先輩から招待してもらい、「勉強会」Projectsに「勉強する人の名前」Fileを作る。
そこに「スライド資料」File内に作ってあるスライドをコピペして使う。各々のデザインFileで好きに弄りながら勉強を進める。

サイドバーの左上、Pages部分から作成者が異なるスライドを見ることができる。スライドの作成者がメンターとなっている場合はその人が作成したスライドを参照すること。独学でやる場合は好きなやつでOK。

![](https://i.imgur.com/jPM37jW.png)

#1 はじめに・目標・成果物

# Figmaの使い方、Figmaとはなんぞや
## Figmaの役割・できること
Figmaはレイアウトのデザインはもちろん、実際に画面を操作した際のシミュレーション（プロトタイプ作成）も可能。スマホ版のアプリを入れれば、自分のスマホでどのように表示されるのかをリアルタイムで確認することもできる。

自分が作ったパーツを簡単にアセットのように登録、使用することができるので、大規模なプロダクトで統一したデザインを提供することができる。Adobe illustratorみたいなこともできるのでレポートの図作成とかも可能ではある。簡単なロゴも作れるはず。

## 各種ツールの使い方・使えるショートカット
まずは勉強会資料のスライドを参考に、Figmaのヘッダー部分にある機能を全部いじってみる。好きなものを作りながらやると良い。

各ツールを選択している際に右側のパネルから操作できるプロパティも全部いじること。時間がない場合はメンターから説明を受ける。ほぼ遊ぶ感じで。楽しみながら好き勝手に作って良い。以下に羅列するが、Figmaのアップデートによって機能追加されている可能性があるので注意。

**ショートカットを覚えましょう。最初は手間取りますが覚えることで格段に操作スピードが上がります。
ツールにマウスをホバーするとボタンが表示される。
**

### 移動
	- マウススクロール：上下
	- Shift+マウススクロール：左右
	- Alt+マウススクロール：スケール操作

### Moveツール（V）
パワポなどと同様選択ツール。迷ったらとりあえずEscを押してV。
使用用途も大まかに一緒。

### Scaleツール（K）
Moveツールとは拡大縮小した時の挙動が異なる。
文字を拡大した時フォントサイズも大きくなったり、strokeも一緒に変化する。

### Frameツール（F）
内部に含まれるパーツがはみ出た時、自動的にトリミングされる。その特性を使ってFrameツールはページのベースとしての使い方以外に、ページ内スクロールを適応させたい場合や、トリミングをしたい時に使用する。はみ出た要素の指定はMoveツールでの選択後、右のパネル「Prototype」から。
section自体にもborderなどの要素を追加することができる点が後述するGroup化と異なる。また、Frameツールでまとまっている要素はAutolayoutで簡単にレイアウトを変更することが可能になる。
Adobe illustrator、Affinity Designerに慣れている人には、アートボードとマスクの機能を併せ持ったツールといった方がわかりやすいかも。

### Sectionツール（shift+S）
主にFigmaの画面およびレイヤーをわかりやすく整理するために使用。
GroupやFrameと似たような挙動をするが、これは見た目をわかりやすく整理したりすることが主な利用用途。

### Sliceツール（S）
エクスポートしたい範囲を指定するツール。
範囲を指定したあと、右のパネルから出力が可能。Timesへの進捗報告などに便利。
複数の拡張子やサイズを選択して出力できるためPC機能のスクリーンショットより高機能。

### 図形ツール（Rectangleツール他 ）＋グループ化
2番目によく使うツール。UIの基本となるありとあらゆる図形を配置できる。配置した図形はStrokeやFillの設定が可能。右パネルをよくいじってみること。
Moveツールで複数の図形を選択してみるとheaderが変化するはず。画像の部分で図形をくっつけたり、削ったりできるので色々試してみること。

- Rectangle（R）
- Line（L）
- Arrow（shift+L）
- Elipce（O）
- Polygon
- Star
- 画像/動画の配置（shift+Command+K）
- Group化（Command+G）
複数の要素をまとめることができます。グループ化した要素を選択した状態で右のパネルから値を変更すると、グループ内のすべての要素に適応されます。

### Penツール
カスタムシェイプが作成できます。ベクトルパス、アンカーポイント、ベジェ曲線を使って複雑な形を描く事ができます。「Enter」 キーを押してパスとアンカーポイントを編集できます。

### Pencilツール
フリーハンドで形を描く事できます。

### Textツール
文字を配置することができます。
クリックのみで自動折り返しなし、ドラッグで範囲を指定することによってテキストボックス形式で配置することができます。
Textを選択している状態でしか右パネルに表示されない情報があります。触ってみてできる限り理解すること。

### Resourcesツール
すでにTeam内で作成されたAssetsやFigmaのプラグインを操作するツール。
Assetは左のパネルから、プラグインは画面を右クリックすることで開くことができるため、ほとんど使わない。それぞれの機能の紹介はかなり発展的かつ長くなるため、ここでは扱わない。
気が向いたらカリキュラム作る

### Handツール（H）
クリックで移動できるようになるだけ

### Commentツール（C）
Figma上にコメントを残すことができる。フロントエンド側に意図を伝えたい時や、動きのイメージを書く時に使用する。

### Presentツール
Figma上に存在するFrameを実装した時のデモを見ることができる。iphoneのアプリと組み合わせるとモバイル版のデザインもやりやすい。Frameを選択している状態で開始するとそのFrameからプレビューを開始できる。

#2 Figmaの使い方

前回同様、生徒のデザインページにスライドコピペしてスタート

### センスが必要かどうか

いらないわけじゃない。
今までの歴史の中で確立されてきた、センスがよく見える法則を守ればいい
合わせて、誰に何を伝えたいのか目的を明確にすること
目的のために最適なデザインを選択し制作することが最も重要。本当に重要。
センス＜目的+基本ルール

### 目的を持ってデザインすることが大事
デザインは手段。美しいデザインを仕上げるために目的を見失ってはいけない

基本的に使うのは自分以外の第三者
ユーザー主体で考えることが大事

自分の好きなデザイン、自己表現に傾けすぎるとアートに近くなっていく。

### デザインの大まかなフロー
目的・要件の設定→レイアウトの設計→そしてその先へ…
目的・要件の定義が大事だよ。

### 情報の整理から始めること
5W1H

### デザインの法則
スライドに例が示してあると思うのでそちらを参照。
- 近接
- 類似
- 閉合
- 整列
- 反復
- 対比


#3 デザインの法則

世の中の色って適当に決めてるわけじゃなくて結構ルールがあるんだよ

## 色相
赤から紫までの色。Figmaとかで見たことある色相環はこれを円形に並べた物

## 彩度
どれくらい鮮やかか。
混じり気のない純粋な色を純色と呼ぶ。反対にグレー白・黒などの色味が全くない色を無彩色という。純色に近ければ近いほど彩度が高く、無彩色に近づくほど彩度は低くなる。

### 明度
白を100、黒を0とした時の明るさを表すのが明度。

### トーン
明度と彩度が一緒の色のグループ。1つのプロダクト内で使用する色のトーンを揃えてデザインすることで一気に完成度が上がる。よく言うパステルカラーとかもトーンが同じグループ。

デザイン系でよく使われる言葉にトンマナ（トーン＆マナー）と言うものがある。
マナーは簡単に言うとデザインの原則、トーンはここで説明したトーンと同じ意味。
これをどれだけ守れるかでプロっぽいデザインになるかどうかが決まる。


### RGBとCMYKと加色混色法と減色混色
色のでき方についてそれぞれ解説
デジタルはRGB、CMYKは印刷物系。パンフレットの素材とかを使う時は注意！
FigmaのカラーツールでHEX、RGB、CMYKの指定の仕方についても調べながらいじってみる。

### 色を考える方法について
- 類似色
  似た色でまとめよう。イメージが綺麗にまとまる。
- 反対色
  色相環でメインになる色の180度反対の色を使う。メリハリがついて良き。
- 補色
  反対色の隣の色。定義がデザイン本によっても変化するから注意すること。

### 色が与えるイメージ
色相全部のイメージ。
青→先進的、黄色→美味しそう・暖か。みたいな感じ。
調べたら出てきます。結局諸説あるから理由付け、0から色を考える時の参考程度に。

### ツール紹介など
配色ツールを紹介。
Adobeの素材とか、マウスでぐりぐり動かして選べるやつとか。Pinterestとかでもあり。ちゃんといじる。

### 使う色を決めるフロー
- 全体的なイメージの決定
  プロダクトのイメージみたいな物を最初に固める。色のイメージから初めたり。
情報系のプロダクトで先進的なイメージにしたいのであれば青系が無難。

- カラーセット・トーンの検討
 すでに紹介したようなのツールもあるけど、いい感じのカラーセットがネットに転がってるのでその辺を調べてみて好きなカラーセットを使うとかでもあり。

- 使う色の数・比率
  メイン、サブ、ベース？みたいな名前でメジャーな比率がある。
  ↑で決めたカラーセットをどういう比率で使用するかとかを考える。
  単に比率を守るだけではなく色に役割を持たせられると良い。「ex.ページ内でユーザーの主目的になるようなボタンはこの色にしよう」

- 色調に関する確認
  WCAGの基準とC、D、P型の色覚について
  単純に黄色に白文字は見にくいよね！みたいな話ではない。
  男性の20人に一人はD、P型の色覚の人がいる。ちゃんと対応しないとえらいことになるよ。技大祭は120人くらいだから6人はいるね。

  無視できないよ。考慮するのは実際に使う時に気にすればいいので今回はする。
  最近話題になったナンジャモの例がわかりやすい。
勉強会の場で色弱が発覚しても大丈夫。カラーピッかーを使って絵を描いてる人もいるので問題はない。

#4 配色

## 和文・欧文
日本語と英語。日本語で英語のフォント打てるけどアルファベットの作りが違うから気をつけてね。

## ゴシック・明朝
鱗の有無、直線的、曲線的などの差。 読みやすさとか違うから使い分けが必要。

## セリフ・サンセリフ
大体同上。日本語と同じようにセリフの有無と直線的かどうかなどの違いがある。

## 明朝体とセリフのイメージ
これまでの感じを見るとわかる通り、与える印象が一緒。合わせて使えるといい感じ。

## ゴシック・サンセリフのイメージ
同上

## フォントウェイトごとのイメージ
小さいと女性的←→大きいと男性的

## 男性的・女性的という考え方があるという話
今風じゃないけどそういうのもあるよ。
雑誌とかで顕著。ロゴとかも。

## 筆書体・スクリプト体・デザイン書体などの亜種フォント紹介
色々なやつがある。フリーフォントとか。

## 自分がインストールしているフォントの確認・増やし方
こういうサイトを使うといいよ。探す時に便利。

https://resource-sharing.co.jp/pc-fonts-web-app-checker-free/

## 一つのプロダクトで使うべきフォント数
2〜3種類に絞るのがいい。関連性のあるものの中から選ぶ。
- 同じフォントファミリー（同じ名前のlight,reguler,midium,bold）。
- 同じ会社
- 和文・欧文の似た系統のセット（明朝とセリフ、ゴシックとサンセリフ）

## 開発分野におけるフォントの使い方
Wordとか→基本的にインストールしているフォントを使う

Web
- Webフォントを指定
  Googleがフォントを公開している。それをコードで指定する方法。
  情報局では一番メジャー。

- 誰かのPCにインストールされている物を指定
  アクセスしたユーザーの端末に保存されているフォントを指定する。
  以下のような指定方法がある。

- | 総称フォント名 | フォントカテゴリー   | 適用フォント例                                          |
  | -------------- | -------------------- | ------------------------------------------------------- |
  | sans-serif     | ゴシック体           | メイリオ、ヒラギノ角                                    |
  | serif          | 明朝体               | MS P明朝、ヒラギノ明朝、Times                           |
  | system-ui      | OSのUIを同じフォント | Yu Gothic UI、Meiryo、ヒラギノ角ゴシック、San Francisco |
  | monospace      | 等幅フォント         | MSゴシック、MS明朝、Osaka-Mono                          |
  | cursive        | 筆記体               | ComicSansMS、Scriptなど                                 |
  | fantasy        | 装飾系フォント       | alba、Chickなど                                         |

- フォントファイルをアップロード

## 長文を表示する際の工夫
書籍の本文や解説文のように複数の行にまたがって文字を並べることを『行組』という。
行組の見え方や文字の読みやすさは「行間」と「行長」の二つの設定項目によって決まる。
読みやすさを考慮した一般的な基準がある。

基本WCAGを参照する。最低限の基準はこれ。
これを守りつつ、こだわりを出していく。
https://docs.google.com/presentation/d/130IVHRl3Im43VEF0Ac90B_dVNJt4QvMrA0YlwbtYzEk/edit?usp=sharing

- 1行の文字数が40文字を超えないこと
- テキストを両端揃えにしない
- 段落中の行間（line-height）は少なくても1.5文字分のサイズ
- 段落間の余白は1.5文字分以上のサイズ
- 横スクロールせずに全文読めること

行間と行長を一定にする→目の動きが一定になり、文章が読みやすくなる。
短文の際は見た目のまとまりを優先して一定にならなくても大丈夫

------

#5 文字と書体

一般にデザインは設計とかの意味でも使われるかなり曖昧な言葉。
デザインはいろんなものを作ることを指してるように思う。

![第23回 「デザインの領域」 | 一般財団法人 大阪デザインセンター](https://www.osakadc.jp/old_imgs/column/blog23-0.jpg)

この中にWebデザイナーはないが、あるとしたら、プロダクトデザイナーの枠に入ると思う。
Webデザイナーも他のデザイナーを包括したような概念になっている。
Webデザイナー
- UIデザイナー
- UXデザイナー

### UIってなに？

UserInterface
ユーザーがサービスと触れ合う境界部分。
サービスを利用する時に眼に触れるところ。

クイズでいえば、クイズの問題・選択肢・答えを表示させるスライド（文字、画像、アイコン）

資料を見ろ

### UXってなに？

User eXperience
コンテンツを通してユーザーがする経験

クイズならクイズに対しての第一印象、驚き、疑問、答えを知ったあとの納得感、あとで思い出した時のこと

資料を見ろ

### UX設計ってなに？

ユーザーにして欲しい体験を考えて、その体験を与える手法を考えること。

クイズなら、問題を考える時に想定するユーザーにして欲しい体験（面白い問題だなーと思って欲しい！、難しい問題作って白けさせよう！、問題を見たあとガッカリさせたい！）

### それら3つの関連性

1. 開発者側：UX設計→楽しみながらUIとUXについて学んでもらいたい。一見わかりにくい出題形式にして一緒に体験してもらう形はどうか。
2. 開発者側：UI→わかりにくいという経験をしてもらうためにわかりにくいUIにしよう
3. ユーザー：UX→なんか変なクイズだったなー。でもUIとUXについて楽しみながら学べた！。

いいUI→UX設計通りのUXをユーザーに提供できるUI
いいUX設計→無理なくユーザーに想定した経験を与えられる手法

いいUX→ない。UXはユーザーの経験を表すだけ。実験結果のようなもの。仮説（UX設計）通りのものが得られたか、得られてないかのみ。

一般に良いUI/UXと言われている概念
↑のクイズの例はかなり特殊。NUTMEGで開発するようなアプリの場合、一般的には効率化をすることが優先される。その場合

1. 開発者側：UX設計→ユーザーが快適に使って欲しい。できる限りユーザーのことを考えて使いやすいアプリにしよう。
2. 開発者側：ユーザーが操作しやすく、華美じゃない意匠にしよう
3. ユーザー：普通。悪くなかった。

UI→快適に操作できるもの
UX→快適であること
このように固まってしまった。

これはあくまで効率化重視のアプリの場合。
技大祭みたいな娯楽が必要なコンテンツではまた別だと思う。
任天堂のやつを見ろ。

### 最低限のルールWCAG

娯楽を求めるUX/UIにするとしても、マイナス方向のUXは避けたいはず。
最低限の基準となるのがWCAG。検索しろ。

### デザインのセオリーについて調べる

最低限のルールを守った上でUIを作るわけだが、そのUIを作る上でも大体のジャンルがある。
服なら…WCAG→肌着　ジャンル→服の系統

- スキューモーフィズムデザイン
- フラットデザイン
- マテリアルデザイン
- ニューモフィズムデザイン
- グラスモーフィズムデザイン

### 課題「Webデザイントレンド 2024」で検索検索



#6  Webデザインとは

## デザインを進める流れ・全体の流れ
ヒアリング→コンセプト設計→情報設計→UX設→UI設計（ラフ・ワイヤー・プロトタイプ）

### ヒアリング
#### ヒアリングとは
ヒアリングはプロダクトの制作活動を開始する前に、主にPM、デザイナー、おもなユーザーになる人（もしくはDXを行うサービスに詳しい人。FinanSuなら先代財務局長など）を呼んで、今までどうやって作業してきたかや、製品に欲しい機能を聞き出すMT。

#### ヒアリングで大事なこと
依頼者の抱える課題と理想を聞き出すこと。
依頼者がプロダクトを使って…
- 何を達成したいのか
- 何をユーザーに提供したいのか
- そのために何を作りたいのか

この辺を言語化できている人はそうそういない。
→デザイナーとPMで聞き出す。

#### ヒアリングで避けないといけないこと
伝えたつもりとわかったつもりになることは避けなければいけない。

基本的にヒアリングを受ける側の人は、こっちのことをかなり頼っている。
細かい部分はふわっと伝えてくることもある。
それに大してなんとなくの理解で了承したり、ちょっと専門用語使って返したりすると双方が確認したっぽい雰囲気になってしまう。

最悪の場合、作ったあとから思ってたんと違うって言われたり、あの機能が足りない！みたいなことになったりする。

#### ヒアリングでよく聞く質問・質問の仕方について

デザイナー主体でヒアリングするのかPM主体でヒアリングするのかちゃんと話あっておくこと。

大体質問したいことは決まってるはず。
ヒアリングシートみたいなものがネットに転がってたりするのでその辺を参考に自作して。
情報局内のプロダクトでヒアリングした時に使ったドキュメントがHackMDとかに残ってる。その辺を参考にするのも良い。

#### ヒアリングにおけるデザイナーの関わり方

こっちからの質問に対してもらえる回答に、追い質問を絶対するようにする。
「こう言う感じでやってたよー」←「それってどんなファイルを使ってやったの？」
「このファイルを使ってやってたよ」←「それって毎年変わらないの？、印刷したりするの？、なんでこのレイアウトなの？このファイルを編集するのは基本的にどんな人？」

ヒアリングが盛り上がってくるとPMと他に参加しているフロント・バックのエンジニアだけで話が盛り上がったりして、ヒアリングさせてもらう人たちが置いてけぼりになってしまったりするので立ち回りに気を付ける。

盛り上がってる中、フロントの人たちが「こう言うレイアウトでいいんじゃない？」みたいな発言をして、まとめにかかることがあるが、これも危ない。ヒアリングさせてもらう人たちはおそらくはっきりとイメージできていないのでデザイナーが橋渡しとなって説明する必要がある。

絵を描いたり、Pinterestで似たレイアウトを紹介する形でもいい。

### コンセプト設計KPIとKGI設計

大体本に書いてある。「times-M1-kobaryo」のheaderに「超実践Webディレクターの教科書」ていう本がある。

- コンセプトとは
- コンセプトの作り方
- 最終的な目的の明確化
- 最終的なゴールの設定
- プロジェクトの目的、背景、課題を言語化
- やりたいこと出し

### 設計

前項同様本に書いてある。同じ本。
HPについてはこの辺の設計記録をHackMDで残している。そちらも参考に。

- ユーザーの感情を設計する際の思考フロー
- ユーザーシチュエーション（ペルソナ）
- ペルソナがサービスに接する際のシチュエーションについて
- シーズ（提供できる価値）とニーズ（必要とされる価値）の把握
- 似たようなサービスのリストアップ
- カスタマージャーニーマップ
- コンテンツ重要度マップ

### レイアウト＆ワイヤー設計

ここまで載せる情報とペルソナとかが決まった、それを元にデザインを作っていく。

- ラフスケッチ
  おおよその画像や文字の配置イメージを手書きで作る。
  Figmaで作ってからPMに確認してもらうスタイルだと時間がかかるのでラフを作って確認してもらうスタイルがおすすめ。最初からデジタルでやると色々できる分変なとここだわって時間がかかる。
  色のイメージは固めてもいい。入れる画像の種類もぼんやり考えておく。

- ワイヤーフレーム作成

  最近は作ってない。ラフの少し正確なもの。入れる文章量とかを正確にしたイメージ。
  作りたかったら作ると良い。

- Figma（プロトタイプ）作成
  画像や文章、padding,margin、色、フォントに至るまで出来る限り実際作るプロダクトに近いもの。
  これを元にデザインを作ってもらう。これができてひとまず完成。ブラッシュアップを続ける。

#7 デザインを進める流れ・全体の流れ

## 全体の目標

- HTMLとCSSを0から書くことができる。
- 適切なcssを当てられるようになる。
- HPを見てどうゆうふうに作られているのか想像できるようになる
- 自分のポートフォリオサイトを作れるようになる。

## 成果物例

- ポートフォリオサイトのようなもの（公開はしない）
↓こんな感じのものがポートフォリオ
百々さん：https://yushirododo63.github.io/portfolio/
ryusei：https://ryuseifujisaki.github.io/
小林：https://ryotakobayash.github.io/blog/


## はじめに

初学者向け。自分も初学者の頃やってかなり大変な思いをしたので丁寧に作ります。

プログラムを勉強するためには、自分で調べて答えに辿り着く力が必要になります。独学する人は15分くらい一人で調べてみてダメだったらslackの#Times-〇〇や#helpで聞いてみてください。

基本的にこのカリキュラムはハンズオン形式手を動かす方針にします。すでにある程度知識がある人は適宜すっとばしながらいただければ幸いです。

## HTML/CSSとは

HTMLはHyper Text Markup Languageの略、CSSはCascading Style Sheetsの略でWebサイトを作るために使用されるマークアップ言語です。

ブラウザを通してみるものは大体これらの言語によって構成されています。 ブラウザで好きなサイトを開いて開発者モードにしてみると、Webサイトを構成するHTMLとCSSを見ることができます。やってみましょう。

![](https://hackmd.io/_uploads/BkAvzBLBh.png)

画面構成は人によると思うが、開発者モードはHTMLが表示される部分、CSSが表示される部分の大きく2つに分かれます。

下の画像でWebサイト上の文字がそのまま表示されているところがHTML部分です。対してその右側、スタイルという名前で{}に囲まれたコードが記載されている部分がCSS部分になります。

どちらも文章、コードをダブルクリックすると編集できます。適当にいじって遊んで見てください。…遊びましたか？

この通りHTMLは文章や画像の配置を担当し、CSSは文章の大きさや余白、画像の大きさなどを調整する役割を果たします。これら二つの働きによりほとんどのWevサイトは成り立っています。


## Webサイトの仕組み
### そもそもWebとは

Webは正式には「World Wide Web」といい、世界中のコンピュータと通信できるインターネットの仕組みを利用して、Webサイトから情報を発信・受信するためにできた仕組みのことを指します。

インターネットにはメールの送受信や、ファイル転送などの様々な機能がありますが、Webはそのうちの一つです。


### Webサイトが表示される流れ

Webページを閲覧するためには「Webサーバー」と「Webクライアント」が必要になります。

Webサーバーはパソコンやスマホなどと同じコンピューターの一種ですが、Web上での情報を公開したり、ファイルを保存するなどの機能を持つものの、画面やキーボードなどは付いていません。 HTMLやCSSなどのファイルはこのWebサーバー上に保存されます。

Webクライアントはユーザーが利用するコンピュータを指します。Webクライアントが欲しいWebページをリクエストし、Webサーバーがそれに応答（レスポンス）することでユーザーはWebページを表示することができます。


## ブラウザの働き

WebサイトはHTMLとCSSのようなコードで構成されていますが、これを普段見かけるような綺麗なレイアウトに変換してくれるのはブラウザのおかげです。現在一般的に使われているブラウザには以下のようなものがあります。

![](https://hackmd.io/_uploads/rksTfBUB3.png)

ブラウザの種類によって動作が変わることはほとんどありませんが、若干表示のされ方が変わったり、一部コードの書き方を変更する必要が出てきます。

Webサイトの開発をする前に基準とするブラウザを決めることを進めます。最低限、確認する時だけでもメンターと使用するブラウザを合わせておきましょう。

情報局では、世界のブラウザシェアを参考にGoogleChromeを基準ブラウザとして開発しています。まだインストールしていない人場合、よほどの主義がなければインストールをお勧めします。

[Google Chrome - Google の高速で安全なブラウザをダウンロード](https://www.google.com/intl/ja_jp/chrome/)


## 今後学ぶであろう技術との関係性、なぜ今HTML、CSSを学ぶ意味

現在、HTMLとCSSを直接書いてでWebサイトを作ろうとする人はほぼいないでしょう。

WordPressやStudioなどのノーコードでWebサイトを作ることができるサービスを使う人や、個人で開発する場合もHTMLやCSSを何らかの手段で生成して作る人が大半だと思います。

ですが、それらの根幹にはHTMLとCSSがあり、形や操作方法が変われど、最終的にはHTML、CSSのお世話になります。今後そのような進化、複雑化したCSSを扱う上でシンプルなHTML、CSSの扱いを学んでおくことはみなさんの力になるはずです。


## コードを書くための準備（エディターのインストール）

HTMLやCSSの記述や、今後の開発を続けていく上で必要なエディターをインストールしましょう。

情報局ではVScodeのインストールを推奨しています。もうすでにインストールが済んでいる、他のエディターを使用している方はスキップしてください。

VScodeはコーディングを助ける拡張機能をインストールすることができます。HTMLとCSSを学習する上で役にたつ拡張機能をまとめます。楽をしたければ使ってください。

下のリストにある文字列をVScodeの拡張機能検索窓にコピペしてください。

VScodeの拡張機能検索欄　拡張機能IDの使い方

- MS-CEINTL.vscode-language-pack-ja VScodeの日本語化用。細かいやり方は以下を参照 [https://www.javadrive.jp/vscode/install/index4.html#section1](https://www.javadrive.jp/vscode/install/index4.html#section1)
- formulahendry.auto-complete-tag HTMLおよびCSSのタグを書くサポート拡張機能
- formulahendry.auto-close-tag 同上
- formulahendry.auto-rename-tag HTMLおよびCSSのタグを書き換える時のサポート拡張機能
- ecmel.vscode-html-css HTMLの様々なことをサポートしてくれる拡張機能
- geyao.html-snippets HTMLおよびCSSの入力を保管してくれる拡張機能

#2 HTMLとCSSの導入

#3 HTML

#4 CSS

## レイアウトを組む

### Flex-box（フレックスボックス）

複雑なレイアウトも簡単に組めるようになる。複雑なレイアウトも簡単に組める書き方です。CSSでレイアウトを組む際によく使います。昔はfloatプロパティでレイアウトを組んでいたので参照するテキストによってはそちらも改訂あるかもしれません。近年はflex-boxで記述することが一般的なのでfloatは取り扱いません。

### 基本的な書き方

Flex-boxは「Flexコンテナ」と呼ばれる親要素に「Flexアイテム」と呼ばれる子要素を入れてHTMLを記述します。親要素に`display: flex;`を指定するだけで勝手に子要素が整列します。親要素にプロパティを指定していくことによって並び方の制御をすることができます。

子要素にもFlex関係のプロパティがありますが、あまり使用する機会がないのでここでは取り扱いません。でも楽しいので、積極的に触ってほしい…。後述するチートシート中に記載があります。

![](https://hackmd.io/_uploads/ryQlkSDr3.png)

- HTML
    
    ```html
    <div class="Flex-container">
      <div class="Flex-container__item">アイテム1</div>
      <div class="Flex-container__item">アイテム2</div>
      <div class="Flex-container__item">アイテム3</div>
    </div>
    ```
    
- CSS
    
    ```css
    .Flex-container {
      display: flex;
      border: 1px solid;
      width: 900px;
      height: 300px;
    }
    
    .Flex-container__item {
      background-color: aqua;
      width: 100px;
      height: 100px;
    }
    ```
    

### プロパティの紹介をする前に

Flex-boxのレイアウトは二つの軸があり、二つの軸にそれぞれプロパティを当てて、並び方を制御します。一般的なテキストとは違った紹介の仕方になりますがわかりやすいと思います。

手取り早く知りたい人は以下のチートシートを見てください。自分が作ったわけじゃないので再頒布禁止。

[flexbox_cheatsheet.pdf](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/1c5a6e2a-531e-4233-a603-a5c1524475ee/flexbox_cheatsheet.pdf)

## 設定できるプロパティ

### flex-directionプロパティ

子要素の並ぶ向きを変えるためのプロパティです。
Flex-boxには「メインになる並ぶ方向（以降主軸）」と、「折り返した際に進む方向、メインの軸に直行する軸（以降副軸）」があります。

このプロパティで軸の向きを変更すると二つの軸の向きが変わるので、以降紹介するプロパティの挙動も変化します。

![](https://hackmd.io/_uploads/HJxldJrwr2.png)

**以降紹介掲載する図は特記しない限り、`flex-direction: row`の時にプロパティを設定した状態です。**

### flex-wrapプロパティ

主軸方向の折り返しを設定できます。

![](https://hackmd.io/_uploads/ByMtkrPB3.png)

flex-directionで`row-reverse`を設定していた場合でもwrapとwrap-reverseは同じ向きに作用しますが、`colomn`を設定していた場合、動きが変化します。

![](https://hackmd.io/_uploads/Hy-9Jrwrn.png)

- css
    
    ```css
    .Flex-container {
      display: flex;
      border: 1px solid;
      width: 900px;
      height: 300px;
      flex-direction: column;
      flex-wrap: wrap;
    }
    ```
    

`Flex-direction: colomn`の場合、主軸は↓方向、`flex-wrap: wrap`により副軸は→方向になっています

![](https://hackmd.io/_uploads/H1t2kBwr3.png)

- CSS
    
    ```css
    .Flex-container {
      display: flex;
      border: 1px solid;
      width: 900px;
      height: 300px;
      flex-direction: column;
      flex-wrap: wrap-reverse;
    }
    ```
    

`Flex-direction: colomn`として主軸は↓方向の時に、`flex-wrap: wrap-reverse`を設定すると副軸は←方向に変化します

### justify-contentプロパティ

主軸方向の揃え方を指定するプロパティです。`flex-direction: column`の場合は縦方向で同じような動きをします。

![](https://hackmd.io/_uploads/rkOTJHPH2.png)

### align-itemsプロパティ

副軸方向の揃え方を指定するプロパティです。

![](https://hackmd.io/_uploads/SJICySDr2.png)

### align-contentプロパティ

副軸方向に複数行子要素が並んだ時の揃え方を指定するプロパティです。

![](https://hackmd.io/_uploads/rk2ylHDHh.png)

	
## グリッドレイアウト

壁にタイルを敷き詰めるように同じ大きさのボックスを等しい感覚で並べていくレイアウトをグリッドレイアウトと呼びます。綺麗なレイアウトを組むことができるので使ってみてください。

### 基本的な書き方

Flex-boxと同様に親要素と子要素が必要です。

「グリッドコンテナ」と呼ばれる親要素で、「グリッドアイテム」と呼ばれる子要素を囲みます。アイテム間の余白を「グリッドギャップ」と呼びます。親要素に`display: grid;`を設定するだけでOKです。何も設定しないと以下の画像のように直並びになってしまいます。

![](https://hackmd.io/_uploads/BJ2WgSPH2.png)

- HTML
    
    ```html
    <div class="Grid-container">
      <div class="Grid-container__item">アイテム1</div>
      <div class="Grid-container__item">アイテム2</div>
      <div class="Grid-container__item">アイテム3</div>
      <div class="Grid-container__item">アイテム4</div>
      <div class="Grid-container__item">アイテム5</div>
      <div class="Grid-container__item">アイテム6</div>
      <div class="Grid-container__item">アイテム7</div>
      <div class="Grid-container__item">アイテム8</div>
      <div class="Grid-container__item">アイテム9</div>
      <div class="Grid-container__item">アイテム10</div>
      <div class="Grid-container__item">アイテム11</div>
    </div>
    ```
    
- CSS
    
    ```css
    .Grid-container {
      border: 1px solid;
      width: 900px;
      height: max-content;
      display: grid;
    }
    
    .Grid-container__item {
      background-color: aqua;
    }
    ```
    

## プロパティ

### grid-template-columnsプロパティ

グリッドアイテム（子要素）のwidthを設定するプロパティです。これでグリッドアイテムを横並びに設定できます。一列にグリッドアイテムが複数必要な場合は半角スペースで区切って複数の値を指定します。

![](https://hackmd.io/_uploads/HJ8mgBPH2.png)

- CSS
    
    ```css
    .Grid-container {
      display: grid;
      border: 1px solid;
      width: 900px;
      height: max-content;
      grid-template-columns: 200px 200px 200px;
    }
    ```
    

### grid-template-rowsプロパティ

グリッドアイテム（子要素）のheightを設定するプロパティです。`grid-template-columns`プロパティを指定することでできた折り返しの行数より小さい数を指定した場合はデフォルトのheightがそのまま適用されます。下の画像みたいな感じ。

![](https://hackmd.io/_uploads/SJOVxBPH3.png)

- CSS
    
    ```css
    .Grid-container {
      margin-top: 100px;
      border: 1px solid;
      width: 900px;
      height: max-content;
      display: grid;
      grid-template-columns: 200px 200px 200px;
      grid-template-rows: 200px 200px 200px;
    }
    ```
    

### gapプロパティ

グリッドアイテム（子要素）同士の余白を作るプロパティです。
親要素に指定することで子要素間に間隔を開けることができます。marginやpaddingとは異なる値で、要素と要素の間にしか適応されません。要素の上下のみ、左右のみに設定することもできます。やり方は使い方は調べてください。

Flex-boxでも同様に要素同士の距離を指定するために使用できます。めっちゃくちゃ便利です。

発展的な使い方をしたければ以下のリンクを参照してください。

[CSSのgapプロパティでグリッド間に適切な余白を作る](https://lpeg.info/html/css_gap.html)

![](https://hackmd.io/_uploads/BJzIlBvrn.png)

- CSS
    
    ```css
    .Grid-container {
      margin-top: 100px;
      border: 1px solid;
      width: 900px;
      height: max-content;
      display: grid;
      grid-template-columns: 200px 200px 200px;
      grid-template-rows: 200px 200px 200px;
      gap: 20px;
    ```
    

### グリッドで使える単位fr

グリッドで使える単位として「fr」があります。fraction（比率）の略で、親要素から見た子要素の大きさを具体的な数値ではなく割合で指定することができます。親要素の幅に合わせて自動で伸縮させるなら「fr」が便利です。

数値の指定の仕方はこれまでの`grid-template-columns`や`grid-template-rows`の指定の仕方と同様です。

![](https://hackmd.io/_uploads/r1nDlBPH2.png)

- CSS
    
    ```css
    .Grid-container {
      margin-top: 100px;
      border: 1px solid;
      width: 900px;
      height: max-content;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 200px 200px 200px;
      gap: 20px;
    }
    ```
    

## 終了

お疲れ様でした。楽しかったですか？もしそうだったら嬉しいですね。

楽しくなかった人と公言する人はきっと面白い人だと思うので、小林に面白くなかった点を教えてください。気が向いたら修正します。

ここまでの技術に一通り触れたあなたは、twitterで生産性を上げる活動に勤しんでいる方法を発信し続けるWebデザイナーなんかよりよっぽど詳しくなりました。

あとは作るだけです。

あなたが見たことがあるWebサイトのレイアウトは基本的にHTMLとCSSだけで再現できます。（動きがあるものはJavaScriptが必要）

全ての基本はもう教えています。何かを実現するために追加で必要な知識を調べて、作って、調べてを繰り返していけば完璧です。

#5 レイアウトを組む

# 目標
- WSLの理解と環境構築の完了
- Gitの理解と導入
- dockerの理解とインストール

# 成果物
特になし

# 構成
- 第二章　WSL
- 第三章　Git
- 第四章　Docker

第一章　はじめに

# 1. WSLについて

## ○WSLとは

- 「Windows Subsystem for Linux」の略
- Windows上でLinux環境を動作させるための仕組み
- 仮想マシンのようなものでホストOSと独立したライフサイクルで管理できる
- 開発環境を簡単に作り直すことができる上に管理しやすい
- 壊れたりしてもpc全体をクリーンインストールなどしなくても大丈夫
- pcを買い替えた時に開発環境の移行が楽
- WSL2はLinuxを稼働させる環境・DockerはLinuxで動作するソフトウェア

### Linuxとは
- WindowsやMac OSと同じOSの一種
- 自由度が高い
- web開発に向いている

# 2. WSLのインストール

## ○windows10の場合

### Windows Subsystem for Linuxを有効化

- 管理者権限のPowerShellで以下を実行
```
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
```

### Linuxディストリビューションをインストール

- マイクロソフトストアでLinuxディストーションをインストール
	- 今回はUbuntu 20.04をインストールする．
- インストールできたらPowerShellからバージョン確認
```
wsl -l -v
```
- バージョン1を使用する場合ここで終了
- バージョン2を使用したい場合以下に続く

## ○windows11の場合

- 管理者権限で起動したコマンドプロンプトやPowerShellから以下を実行
```
wsl --install
```

## 3. WSL2へアップグレード

## ○windows10の場合

### WSL 2 の実行に関する要件を確認する

- Windows ロゴ キー + R キー で，「winver」と入力し確認
※WSL 2 に更新するには、Windows 10 を実行している必要がある
※要件を満たさない場合はインストールできないので、設定メニューで最新の Windows バージョンに更新する
- x64 システムの場合
	- バージョン 1903 以降、ビルド 18362 以上
- ARM64 システムの場合
	- バージョン 2004 以降、ビルド 19041 以上

### 仮想マシンの機能を有効にする

- 管理者権限のPowerShellで実行
```
dism.exe /online /enable-feature /featurename:VisualMachinePlatform /all /norestart
```

### Linux カーネル更新プログラム パッケージをダウンロードする

- 以下からダウンロードしてインストール．
https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

### WSL 2 を既定のバージョンとして設定する

```
wsl --set-default-version 2
wsl --set-version Ubuntu-20.04 2
```

## ○windows11の場合

- 以下のコマンドを実行する
```
wsl --update
```

第二章　WSL

# 1. Gitについて
## gitとは
- [参考記事（イラスト見ればわかりやすい）](https://drive.google.com/file/d/1EiflTW3p2q3_s5ZIMinNTQ4hxVydaoDz/view)
- 分散型バージョン管理ツール
	- 利用者一人ひとりに専用の保管場所を提供し、変更が終わったらメインの保管場所に反映する
	- 編集前のファイルを保存したまま作業をすることができる
	- 集中型の場合（gitとは逆の型）
		- 1つのフォルダを、利用者が共同で使用
	- ファイルを編集する場合
		- 普通はファイルを編集すると上書きされるので、編集前の状態は保存されない
		- 保存するためには、編集前のファイルを複製をしなければならない
	- チーム作業をしている場合
		- 誰がどの変更をしたのか分からない
		- 同時に編集した場合に別の人に上書きされて消えてしまう事もある

## 重要用語解説（実際に使いながら理解するのが良い）
- リポジトリ
	- ファイルやディレクトリの状態を保存するためのストレージ
	- 保管庫のようなもの
- ローカルリポジトリ
	- 自分のpc内にあるコピーしたリポジトリ
- リモートリポジトリ
	- サーバなどのネットワーク上にあるオリジナルのリポジトリ
- ブランチ
	- ファイルを編集した履歴を分岐させて記録していく機能のこと
- ブランチを切る
	- マスターブランチ（メインのブランチ）から分岐させて新しいブランチを追加する事

## 重要コマンド
- pull
	- リモートリポジトリにあるファイルをローカルリポジトリに反映させること
- add
	- インデックスに追加する事
	- commitの前準備
- commit
	- ローカルリポジトリに作業履歴を保存する事
- push
	- ローカルリポジトリにあるファイルをリモートリポジトリに反映させる事
- marge
	- 切られた（分岐した）ブランチと他のブランチを統合する事
	- マスターブランチに統合することが多い

## gitでできること
- ファイルの変更履歴を管理できる
- 過去のファイルに戻せる
- なんでも管理できる
	- プログラムのソースコード
	- Excelファイル
	- 画像　etc…
- チームで共有できる

## gitを使う場面
- プログラミング
	- プログラミングのソースコードを書くときに利用される
	- バージョン管理がしやすく、チームで作業するときに利用される
- Webデザイン
	- テキストデータ（HTMLやCSSなど）の変更履歴を管理することが得意
- Webライター
	- 遠隔地で書いた原稿を納品する
	- Webライターが取り扱うデータもテキストである

# 2.  githubについて 

## githubとは
- gitの仕組みを利用して、ネット上に保存、公開できるようにしたウェブサービスのこと

## できること
- バージョン管理
	- ソースコードなどのファイルの変更履歴を管理できる
		- 新しいバージョンから古いバージョンに戻すこともできる
- ソースコード管理
	- 複数人で開発をする際に便利
	- ソースコードの共有やレビューなどができる
- メリット
	- 開発の効率が上がる
	- プライベートのリポジトリも無料で管理できる
	- 品質の高いコードが作れる
	- 大人数の開発にも有効

## 重要用語解説
- プルリクエスト
	- 変更内容が正しいか、マージしても正常に動作するか、コードのレビューを依頼する事
	- リモートリポジトリにマージする前に行う
- マージ
	- ローカルリポジトリで変更されたコードを、リモートリポジトリに反映させえること
	- プルリクエストを受け取った後に行われる

# 3.  Githubにサインアップする 
[GitHubにサインアップし、アカウントを作成する](https://github.co.jp/)

gitとsshを連携する
https://qiita.com/shizuma/items/2b2f873a0034839e47ce

第三章　Git

# 1. Dockerについて
## Dockerとは
- [参考記事（イラスト見ると分かりやすい）](https://docs.google.com/presentation/d/1pXB54O2fRKvyUSTaTGztlAxtT9SbOIk2IU769cx4rto/edit#slide=id.g188cb18cb7_0_18)
- コンテナ型仮想化プラットフォーム
	- 仮想環境を構築するツールのこと
	- WindowsやMacなどのホストマシンの上に「コンテナ」と呼ばれる仮想環境を構築し、そのコンテナの中でアプリケーションを動かす

## 重要語句
- Docker Engine
	- コンテナ化及びコンテナを動作させるためのアプリケーションで、Dockerの核となる部分のこと
- コンテナ
	- Dockerエンジン上で動く仮想環境のこと
- Docker image
	- コンテナを作成するための依存関係や情報を含むデータのこと
	- コンテナはこのイメージが元になって作成される
- Dockerfile
	- Docker imageをビルドするための手順が記載されたファイルのこと
- Docker Compose
	- 複数のコンテナを同時に利用するようなアプリケーションにおいて、複数のコンテナの連携をするツールのこと

## できること
- 1台のサーバー上に複数のアプリケーション実行環境（Dockerコンテナ）を作成・利用できる。
	- サーバーの有効活用や、サーバー機の節約が可能
- アプリケーション実行環境（Dockerコンテナ）の他サーバーなどへの移転、他ユーザーとの共有ができる
	- Dockerコンテナの移転や共有は複雑で手間のかかる操作を必要とせず、簡単に実行することができる
- Dockerコンテナでアプリケーションの開発環境を作成し、インターネット上で他エンジニアと簡単に共有できる

## メリット
- 素早く簡単にアプリケーションの実行環境を確保できる
- 処理速度が速い(CPUやメモリーの使用量を節約できる)
- アプリケーション実行環境の移転が簡単


# 2. Dockerをインストールする
- [Dockerサイト](https://www.docker.com/)にアクセスする。
- 「Download Docker Desktop」をクリックしてダウンロードする。
- 「Download for Windows」のリンクをクリックしてDocker Desktopをダウンロードする。
- ダウンロードしたインストーラを実行する。

第四章　Docker

第8章：APIの作成

## main.dartを紐解く

libフォルダにあるmain.dartがflutterアプリケーションを開発におけるスタート地点です．
main.dartには以下のような記述があります．
```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}
```

### import 文
`import` 文ではそのプロジェクトで利用可能なパッケージを各ファイルで参照可能にするために使用します．パッケージだけでなく，別のファイルで実装した機能を参照するために使用します．

例えば上記のコードにおいて，`MyApp`が別ファイルのmyapp.dartにあるとします．(libの直下にあるとします)
その場合は以下のように記述します．
```
import 'package:flutter/material.dart';
import './myapp.dart';

void main() {
  runApp(const MyApp());
}
```
もしくは以下のようにも記述できます．
```
import 'package:flutter/material.dart';
import 'package:(プロジェクト名)/myapp.dart';

void main() {
  runApp(const MyApp());
}
```

### mainメソッドとrunAppメソッド
`main`メソッドはFlutter の実行時にプログラムのエントリーポイントとして扱われるもので，すべての処理（実装した分）については`main`メソッドを起点に動き始めます．Flutter アプリではrunApp()で最初に展開して欲しい Widget を指定します．通常は MaterialApp を持ってきます．iOS スタイルで開発する場合は CupertinoApp も同様に使用できます．もちろん，その他の Widget でも配置可能です．

`runApp()`がなければ，それはただの Dart プログラムとして動作します．
Flutter アプリ開発においては，とりあえず "main から始まって，runApp を呼んだところから Widget が必要になるんだね" ということを覚えておいてください．

### MyApp Widget
Flutter ではすべてが Widget であると言われます．これは Flutter が公式に言っています．Widget という言葉についてはおいおい理解するとして，とりあえず部品があって，それを組み合わせて作るんだと思っておいてください．レゴブロックのようなものです．

テンプレートの MyApp Widget について見てみましょう．
```
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: title),
    );
  }
}
```

まず`class`として MyApp が定義されています．オブジェクト指向な言語に触れていればクラスという言葉については一切抵抗なくスタートできると思います．Flutter はすべてが Widget だと言いましたが，Widget もクラスです．Widget というなんだか新しい概念が出てきた感がありましたが，ただのクラスです．Flutter を動かす上で必要な機能がモリモリのったクラスです．

次に`StatelessWidget`についてですが，とりあえず，よく使う`Widget`のひとつだと覚えておいてください．

次は`const MyApp({Key? key}) : super(key: key);`についてです．
これの理解をキチンとするにはオブジェクト指向について理解し，クラスの親子関係について知っている必要があります．こちらも概要だけ説明すると，これはコンストラクターーです．コンストラクターーとはクラスが実体として生成される際に呼び出される処理を指します．さらに後半に付属している`:super(key: key)`はコンストラクターーのリダイレクトと呼ばれる`Dart`独特の書き方です．リダイレクトの名の通り，コンストラクターーが呼び出されたときにまた別のコンストラクターーを呼び出すための紐付けです．`super`は親を指すので，元を辿れば`Widget`クラスのコンストラクターーを呼び出していることになります。
ここでは加えて，Flutter における`Key`とはなんなのか，の理解が必要になります．簡単に言えば，Flutter において画面に表示されている要素を特定することができるキーです．

次は`@override`についてです．これはそのままオーバーライドです．これもオブジェクト指向あるあるですね．親のクラスにあるメソッドに対してオーバーライドを定義してあげると，親のクラスのメソッドが呼び出されそうなタイミングで代わりにこちらが呼び出されます．処理を奪い取るような感じがしますが，どちらかというと親のクラスは子クラスで実装することを想定して書き方だけ提供しているような感じです．実際，`StatelessWidget`では build メソッドが定義されていますが，中身がありません．Flutter のフレームワークとして，各`Widget`の build メソッドを順次呼び出しますよ，というのが決まっているので，各`Widget`はそれに備えて build メソッドをオーバーライドして実装しておくというものです．

やっと到達しました，`MaterialApp`です．これは Flutter が提供する基本ライブラリである material の仕組みをアプリケーション全体に提供するために一番根っこに定義するものです．`MaterialApp`の定義を見るとわかるのですが，かなりの数のパラメーターーを指定できます．ほとんどのパラメーターーはデフォルト値を持つので，指定しなくてもアプリケーションは動作します．より詳細なカスタマイズが必要になった段階で変更を検討すれば良いですが，そうそうに触ることになるのが`Theme`です。テーマについては実際にポケモンアプリを作る過程で使用します。

以上で MyApp の確認が終わりました．
最後に home に設定されている`MyHomePage`について触れます．
`MyHomePage`は`StatefulWidget`で作られています．さきほど後回しにした，`StatelessWidget`と対をなす`Widget`です．`StatefulWidget`はそれ単体ではあまり意味がありません．別途`State<T>`クラスを実装する必要があります．`StatefulWidget`と`State<T>`には紐付けが行われています，それが`createState` です．`State<T>`は状態を保持するクラスです．つまり，状態を保持するクラスと連携して動作するのが，`StatefulWidget`で，単独で動作しつつ保持する値は何も変わらない`StatelessWidget`とはペアということになります。

今回の内容は，実際にアプリを作る際にはあまり理解していなくても大丈夫ですので，流しておいてください．

今後実装するにあたって，一度テンプレートを整理します．以下の通りに整理しましょう．
- コメント類を消す
- FAB(Floating Action Button)を消す
- AppBar を消す
- StatefulWidget を消して StatelessWidget へ変更する
- 画面中央に HelloWorld を表示する

以下のような感じになればOKです．
```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Hello World'),
      ),
    );
  }
}
```

### まとめ
今回は以下の内容を覚えてください
- Flutter は Widget でできている
- Widget は Dart のクラスのひとつ
- 基本の Widget に StatelessWidget と StatefulWidget がある


main.dartを紐解く

## 第2章：ポケモン紹介ページの作成 

### PokeAPIについて

本章では，ポケモンの紹介ページを作ります．紹介ページではポケモンの情報をいい感じに見せることを目的としています．ポケモンの情報といってもさまざまです．名前，画像，タイプなどから，覚える技，ステータスの基礎値などさまざまです．

とりあえずここでは以下の項目を表示するページを作ってみようと思います．
- ポケモンの画像
- 名前
- タイプ
- 番号

それぞれの情報は PokeAPI から取得して使用します．最初はプログラムとして API 呼び出しをするのではなく，ブラウザ上でデータを確認し，直接データを指定して画面デザインの構築だけを行います．URLは以下の通りです．

`https://pokeapi.co/`

PokeAPI は RESTfulAPI です．ポケモンに関するさまざまな情報を取得できます．API の使用には事前の登録も費用の支払いも一切が不要です．GitHub でオープンソースとして開発されています．


### ピカチュウの情報をPokeAPIで取得する

PokeAPI のページではブラウザ上で API を試すことができます．今回の UI 構築にはポケモンの中でもっとも有名であろう，ピカチュウを使用します．

PokeAPI のページで以下の URL をリクエストしてみてください．すると，JSON形式で結果が得られます．

`https://pokeapi.co/api/v2/pokemon/25`

- 名前は　"name" にあるとおり "pikachu" で OK です．
- タイプは "types" -> "0" -> "type" -> "name" にある "electric" です．電気タイプですね．

それぞれ，和名が欲しい場合は別途 API を呼び出す必要がありますが，取得可能です．

- pokemon-species/25 をリクエストし、"names" -> "0" -> "name" で "ピカチュウ" が得られます．
- types/13 をリクエストし、"names" -> "0" -> "name" で "でんき" が得られます．

このアプリでは和名を得るために追加で API を叩くコストを払いたくなかったので，すべて英名で作ります．

- 画像は "sprites" -> "other" -> "official-artwork" -> "front_default" に URL があります．
- 番号は "id" で OK です．

### 画像を配置する

では早速画像を配置します．`HelloWorld`のテキストの代わりに，`Image.network()`を使用します．
```
return Scaffold(
        body: Center(
          child: Image.network(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png"
					),
        ),
			);
```

これでとりあえずはピカチュウが表示されます．フルサイズで表示されるのでちょっと主張激しめです．

ちょっとフルサイズは大きすぎる気がするので，もう少し小さくして見ます．

`Image.network()`には`double height`と`double width`というプロパティが用意されています．とりあえず適当にどちらも 300 にしてみます．
```
return Scaffold(
        body: Center(
          child: Image.network(
            "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
            height: 300,
            width: 300,
          ),
        ),
      );
```

さきほどよりはちょっと収まったような気がします．しかし，固定のサイズにするとデバイスの差による見え方の違いが考慮できていません．レスポンシブデザインを意識するなら，もう少し考慮が必要です．Flutter はクロスプラットフォームな SDK ですので，レスポンシブデザインは意識していく必要があります．

### その他の要素の配置
次に名前とタイプと番号です．
名前は真ん中がいいですね．画像の真下に中央揃えで出しましょう．
```
return Scaffold(
        body: Center(
          child: Column(children: [
            Image.network(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
              height: 100,
              width: 100,
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
          ]),
        ),
      );
```

名前はちょっと大きめにして，太字にしました．とりあえず愚直に設定します．テーマを使おうとかそういう難しい話は後回しにしましょう．
Column を入れると，Center の中に入れていたとしても，何もしなければ上寄せになります．
次の通りにしてみましょう．
```
return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,   // <== 追加
            children: [
              Image.network(
                "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                height: 100,
                width: 100,
              ),
              const Text(
                'pikachu',
                style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
      );
```

MainAxisAlignment は Column が縦方向なので、メイン = 縦方向の Align（寄せ感）を真ん中にするというものです．左右については Center() で実現しています．
実は Column にはもうひとつ似た設定があります．CrossAxisAlignment といいます．これは CrossAxis（横方向）なのですが，Center とは意味が異なります．

次の通りにしてみましょう．
```
return Scaffold(
        body: SizedBox(
          width: MediaQuery.of(context).size.width,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.network(
                "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                height: 100,
                width: 100,
              ),
              const Text(
                'pikachu',
                style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
      );
```
これは，Column というウィジェットの横幅は CrossAxis を設定したところで，画面の横幅いっぱいにはなりません．そのため，Children の幅が小さければ，中央には寄ってくれないのです．

イメージが掴みやすいように今度は Container でラップし、背景色をつけてみましょう。
```
return Scaffold(
        body: Container(
          color: Colors.blue[200],
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.network(
                "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                height: 100,
                width: 100,
              ),
              const Text(
                'pikachu',
                style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
      );
```
どれだけ CrossAxis 方向に指定したところで，この狭さでは何も変わりません．
理屈がわかったところで、とりあえずここでは Center + Main で実装します．

では次にポケモンのタイプですね．
タイプはせっかくなのでカラフルにしてみようと思います．
Chip ウィジェットがかわいくてオススメです．

```
return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
              height: 100,
              width: 100,
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            const Chip(
              label: Text('electric'),
              backgroundColor: Colors.yellow,
            ),
          ],
        ),
      ),
    );
```

今回は Chip ウィジェットを使いましたが，そういった便利なウィジェットに詳しくないと Flutter のアプリは作れないんじゃないかと感じる方も多いようです．これはあながち間違いではなく，ウィジェットに詳しいことは Flutter アプリを組む上で有利なのは間違いありません．
以下の動画が参考になります．

`https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG`

Widget of the Week では、Flutter の便利なウィジェットが短い動画で紹介されます．流し見て、"こういうのがあるんだな"，というのを知っておくことで，アプリ開発がスムーズになることでしょう．

一方で，このデザインは Chip が必須かというとそうではありません。Container で作って見ましょう．
```
Container(
  child: const Text('electric'),
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
    color: Colors.yellow,
    borderRadius: BorderRadius.circular(20),
  ),
),
```

最後にポケモンの番号です．
番号はポケモン画像の左上に入れようと思います．画像の左上となると，"画像" という要素と，番号の"テキスト" を重ねる必要があります．

"重ねる" というレイアウトを実現するためには Stack を使います．

では画像に重ねて見ましょう．
```
Stack(
  children: [
    Container(
      padding: const EdgeInsets.all(32),
      child: Image.network(
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
        height: 100,
        width: 100,
      ),
    ),
    Container(
      padding: const EdgeInsets.all(8),
      child: const Text(
        'No.25',
        style: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
),
```

### まとめ
今回は以下のことを覚えてください．
- レイアウト系ウィジェットの使い方
- 画像の扱い方

今回までで，main.dartが以下のようになっていればOKです．
```
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Container(
                  padding: const EdgeInsets.all(32),
                  child: Image.network(
                    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                    height: 100,
                    width: 100,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text(
                    'No.25',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            const Chip(
              label: Text('electric'),
              backgroundColor: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}
```

第2章：ポケモン紹介ページの作成

## 第3章：メイン画面とサブ画面の移動
### 画面遷移を実装する
ポケモン図鑑のイメージは，まずメイン画面はリスト化されていて，選択すると詳細画面が表示されるようなイメージになります．
今回は，メイン画面と詳細画面の移動はNavigatorを使用します．

まず，次のようにファイルを分け，今まで使ったPokedetailウィジェットをpoke_detail.dartに移動させましょう．main.dartには，`import './poke_detail';`で取り込みます．

- main.dart
- poke_detail.dart

main.dartでは，TopPageウェジェットを作成し，中央ボタンをひとつ配置します．そのボタンをクリックすると，PokeDetailに遷移するようにします．
```
class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: const Text('detail'),
          onPressed: () => {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) => PokeDetail(),
              ),
            ),
          },
        ),
      ),
    );
  }
}
```

### メイン画面の ListView を作る
画面遷移ができたので，メイン画面をリスト化させてみましょう．

ポケモンはとんでもない数いるので，単純なリストを作るとちょっとまずいです．まずさも含めてみていきましょう．
```
class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: const [
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
          PikaButton(),
        ],
      ),
    );
  }
}

class PikaButton extends StatelessWidget {
  const PikaButton({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: const Text('pikachu'),
      onPressed: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => const PokeDetail(),
          ),
        ),
      },
    );
  }
}
```

これは，めんどいです．繰り返しで処理したいのなら，Iteratorを使いましょう．
```
class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: List.generate(10000, (id) => id)
            .map((val) => PikaButton(index: val))
            .toList(),
      ),
    );
  }
}
```

とはいえ，本来はこちらの方がベターです．
```
class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 10000,
          itemBuilder: (context, index) => const PikaButton()),
    );
  }
}
```

ListView では，レンダリングを必要最小限にすべきということを意識します．

では，リストから選択すると詳細に行くんだよ，ということがわかるようにしてみましょう．
リストは ListTile で作ると簡単です．

```
class PokeListItem extends StatelessWidget {
  const PokeListItem({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Image.network(
        "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
        height: 50,
        width: 50,
      ),
      title: const Text('pikachu'),
      onTap: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => PokeDetail(),
          ),
        ),
      },
    );
  }
}
```

この PokeListItem を ListView.builder で回せばいい感じです．

それっぽくはなりましたが，ちょっと見た目をもう少しそれっぽくしたいので調整します．
```
class PokeListItem extends StatelessWidget {
  const PokeListItem({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Container(
        width: 80,
        decoration: BoxDecoration(
          color: Colors.yellow.withOpacity(.5),
          borderRadius: BorderRadius.circular(10),
          image: const DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
            ),
          ),
        ),
      ),
      title: const Text(
        'Pikachu',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
      subtitle: const Text(
        '⚡️electric',
      ),
      trailing: const Icon(Icons.navigate_next),
      onTap: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => PokeDetail(),
          ),
        ),
      },
    );
  }
}
```

LitTile は leading, title, subtitle, trailing などのスマホあるあるな固定位置に Widget を配置できるのでいい感じですね．

PokeListItem が随分と大きくなってしまったので，別のファイルに取り出しておきましょう．


## まとめ
本章では，次のことを覚えてください．
- Dartファイルの分割
- Navigatorでの画面遷移
- ListViewの効果的な使い方


今回までで作成したプログラムは次のようになります．
- main.dart
```
import 'package:flutter/material.dart';
import './poke_list_item.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Poke Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TopPage(),
    );
  }
}

class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 1000,
          itemBuilder: (context, index) => PokeListItem(index: index)),
    );
  }
}
```

- poke_detail.dart
```
import 'package:flutter/material.dart';

class PokeDetail extends StatefulWidget {
  @override
  State<PokeDetail> createState() => _PokeDetail();
}

class _PokeDetail extends State<PokeDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Container(
                  padding: const EdgeInsets.all(32),
                  child: Image.network(
                    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                    height: 100,
                    width: 100,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text(
                    'No.25',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            const Chip(
              label: Text('electric'),
              backgroundColor: Colors.yellow,
            ),
          ],
        ),
      ),
    );
  }
}

```

- poke_list_item.dart
```
import 'package:flutter/material.dart';
import './poke_detail.dart';

class PokeListItem extends StatelessWidget {
  const PokeListItem({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Container(
        width: 80,
        decoration: BoxDecoration(
          color: Colors.yellow.withOpacity(.5),
          borderRadius: BorderRadius.circular(10),
          image: const DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
            ),
          ),
        ),
      ),
      title: const Text(
        'Pikachu',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
      subtitle: const Text(
        '⚡️electric',
      ),
      trailing: const Icon(Icons.navigate_next),
      onTap: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => PokeDetail(),
          ),
        ),
      },
    );
  }
}
```



第3章：メイン画面とサブ画面の移動

## 第4章：ダークモードの実装
### ダークモードを実装
最近のアプリは，だいたいダークモードに対応してますよね．
こちらもダークモードに対応させてみましょう．
ダークモードの対応はThemeで作ります．

現在は，以下のようになっています．
```
return MaterialApp(
      title: 'Pokemon Flutter',
      theme: ThemeData.light(),
      home: const TopPage(),
    );
```

これに1行追加して，ダークモードへの対応は終わりです．
```
return MaterialApp(
      title: 'Pokemon Flutter',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),  // <- ここに追加
      home: const TopPage(),
    );
```

ですが，ダークモード対応した時は注意深くデザインが壊れていないことを確認した方が良いです．実際，このケースでも Chip のテキストの色がおかしいです．

Chip の色を黄色にした場合，その明るさを考慮するとダークモードでもライトモードでも文字は黒色であって欲しいですね．でも，これは Chip が黄色だからであって，水タイプを青にしたり，エスパーを紫にした時にも同じことが言えるのでしょうか・・・．

こういうときは ruminance という値を使って分岐させます．
```
Chip(
  backgroundColor: Colors.yellow,
  label: Text(
    'electric',
    style: TextStyle(
        color: Colors.yellow.computeLuminance() > 0.5
            ? Colors.black
            : Colors.white),
  ),
),
```

とりあえず数色しか使わないのでざっくり判定していますが，まぁまぁ雑なコードです．ありとあらゆるコードが最適で洗練されている必要はないと思っているので，適度に手は抜いています．いろいろな色に対応するならもっとまじめにやる必要があります．以下のメソッドを使ってきっちりやりましょう．
(estimateBrightnessForColor static method)[https://api.flutter.dev/flutter/material/ThemeData/estimateBrightnessForColor.html]

では続いて，ダークモードとライトモードをデバイスのシステム設定によらず固定してみましょう．
MaterialApp にこれは用意されています．
```
Widget build(BuildContext context) {
    ThemeMode mode = ThemeMode.system;
    return MaterialApp(
      title: 'Pokemon Flutter',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,   // <-- ここ
      home: const TopPage(),
    );
  }
```

ThemeMode.system, dark, light が用意されています．これを指定すれば完了です．ここではいったん mode を system にしておいておきます．あとで，この設定をアプリの設定画面に追加し，ここに反映するようにします．そのときにまた使いますので，おいておいてください．

### まとめ
本章では，次のことを覚えてください．
- MaterialApp のテーマを設計する方法


今回までで作成したプログラムは次の通りです．
- main.dart
```
import 'package:flutter/material.dart';
import './poke_list_item.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Poke Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const TopPage(),
    );
  }
}

class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
          itemCount: 1000,
          itemBuilder: (context, index) => PokeListItem(index: index)),
    );
  }
}
```

- poke_detail.dart
```
import 'package:flutter/material.dart';

class PokeDetail extends StatefulWidget {
  @override
  State<PokeDetail> createState() => _PokeDetail();
}

class _PokeDetail extends State<PokeDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Container(
                  padding: const EdgeInsets.all(32),
                  child: Image.network(
                    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                    height: 100,
                    width: 100,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text(
                    'No.25',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            Chip(
              backgroundColor: Colors.yellow,
              label: Text(
                'electric',
                style: TextStyle(
                    color: Colors.yellow.computeLuminance() > 0.5
                        ? Colors.black
                        : Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

- poke_list_item.dart
```
import 'package:flutter/material.dart';
import './poke_detail.dart';

class PokeListItem extends StatelessWidget {
  const PokeListItem({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Container(
        width: 80,
        decoration: BoxDecoration(
          color: Colors.yellow.withOpacity(.5),
          borderRadius: BorderRadius.circular(10),
          image: const DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
            ),
          ),
        ),
      ),
      title: const Text(
        'Pikachu',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
      subtitle: const Text(
        '⚡️electric',
      ),
      trailing: const Icon(Icons.navigate_next),
      onTap: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => PokeDetail(),
          ),
        ),
      },
    );
  }
}
```


第4章：ダークモードの実装

## 第5章：ボトムナビゲーションで設定画面をつくろう
### ボトムナビゲーションを作る
では，設定画面を作ってみましょう．設定はボトムナビゲーションにあったり，AppBar からドロワーが出てきてその中にあったり，はたまた FAB (Floating Action Button) にあったりとさまざまです．

ここでは一番ベーシックなボトムナビゲーションを使ってみようと思います．

とりあえず home と settings の 2 つにします．
```
class TopPage extends StatelessWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
          itemCount: 1010,
          itemBuilder: (context, index) => PokeListItem(index: index),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => {},
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'settings',
          ),
        ],
      ),
    );
  }
}
```

この状態でボトムナビゲーションをクリックしても何もおきません．ボトムナビゲーションをつかうためには，次ををする必要があります．

- タップしたらそっちをフォーカス
- フォーカス位置にあった画面を body に表示

ということは，いまどちらがタップされているのかを記憶しておく必要があります．
ここではじめて 状態 を持った画面が必要になりました．
ここまでは完全にただのお絵かきでしたが，アプリは状態を保つことでインタラクティブになります．これによってちょっとずつアプリっぽくなってきますね．

状態の持ち方にはたくさんの方法があります．状態管理と呼ばれるものです．状態管理ライブラリの選定にはさまざまな選択肢がありますが，そういうリッチなものを使わなくてもある程度のことはできます．

Flutter における状態管理のもっとも基本となるのが StatefulWidget です．
StatefulWidget は Widget と State のペアで構成されます．この辺りは Widget ツリーのことを深く知ってくるとわかるのですが，後回しにしましょう．
StatelessWidget を StatefulWidget に書き換えるところはとりあえず気合で覚えてください．
```
class TopPage extends StatefulWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  @override
  Widget build(BuildContext context) {
    return SomethingNiceWidget(....);
  }
}
```

- StatefulWidget は State とペア
- createState で StatefulWidget に State を紐づける
- State 側は単純に続きの Widget を返す
で OK です．

ボトムナビゲーションのアクディブなメニューを状態として持たせてみます．状態の更新は setState() で実施します．
```
class TopPage extends StatefulWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  int currentbnb = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView.builder(
          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
          itemCount: 1010,
          itemBuilder: (context, index) => PokeListItem(index: index),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => {
          setState(
            () => currentbnb = index,
          )
        },
        currentIndex: currentbnb,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'settings',
          ),
        ],
      ),
    );
  }
}
```

注意点として，setState にはコールバック形式で値の更新を与えます．

これは、Widget はあくまで設計図であり，実行時に決まる値は関数で与えるべしというものなのですが，この辺りも Build サイクルを知ってからですね．

### ボトムナビゲーションを使ってメイン画面を切り替える
なにはともあれ，これでボトムナビゲーションの選択状態は切り替わるようになりました．

これに合わせて，body のメイン画面を切り替えます．

切り替えやすいように ListView を独立した Widget に取り出し，PokeList と名付けておきましょう．
```
class PokeList extends StatelessWidget {
  const PokeList({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
      itemCount: 1010,
      itemBuilder: (context, index) => PokeListItem(index: index),
    );
  }
}
```

同じようにsettingsを作ります．
```
class Settings extends StatelessWidget {
  const Settings({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        ListTile(
          leading: Icon(Icons.lightbulb),
          title: Text('Dark/Light Mode'),
        ),
      ],
    );
  }
}
```

これを PokeListの代わりに body に入れます．あとはこれを切り替えましょう．
```
body: SafeArea(
        child: currentbnb == 0 ? const PokeList() : const Settings(),
      ),
```

これで OK です．
実は，この実装では Widget をがっつり切り替えているので，切り替え時にツリーの情報が失われます．
これについては解決方法はありますが，ここでは手を触れずに進めます．

### まとめ
本章では，次のことを覚えてください．
- BottomNavigationBar の使い方
- BottomNavigation で画面を切り替える方法

今回までで次の通りのプログラムのようになります．
- main.dart
```
import 'package:flutter/material.dart';
import './poke_list.dart';
import './settings.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Poke Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: ThemeMode.system,
      home: const TopPage(),
    );
  }
}

class TopPage extends StatefulWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  int currentbnb = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: currentbnb == 0 ? const PokeList() : const Settings(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => {
          setState(
            () => currentbnb = index,
          )
        },
        currentIndex: currentbnb,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'settings',
          ),
        ],
      ),
    );
  }
}
```

- poke_detail.dart
```
import 'package:flutter/material.dart';

class PokeDetail extends StatefulWidget {
  @override
  State<PokeDetail> createState() => _PokeDetail();
}

class _PokeDetail extends State<PokeDetail> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Stack(
              children: [
                Container(
                  padding: const EdgeInsets.all(32),
                  child: Image.network(
                    "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
                    height: 100,
                    width: 100,
                  ),
                ),
                Container(
                  padding: const EdgeInsets.all(8),
                  child: const Text(
                    'No.25',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ],
            ),
            const Text(
              'pikachu',
              style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
            ),
            Chip(
              backgroundColor: Colors.yellow,
              label: Text(
                'electric',
                style: TextStyle(
                    color: Colors.yellow.computeLuminance() > 0.5
                        ? Colors.black
                        : Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
```

- poke_list.dart
```
import 'package:flutter/material.dart';
import './poke_list_item.dart';

class PokeList extends StatelessWidget {
  const PokeList({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
      itemCount: 1010,
      itemBuilder: (context, index) => PokeListItem(index: index),
    );
  }
}

```


- poke_list_item.dart
```
import 'package:flutter/material.dart';
import './poke_detail.dart';

class PokeListItem extends StatelessWidget {
  const PokeListItem({Key? key, required this.index}) : super(key: key);
  final int index;
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Container(
        width: 80,
        decoration: BoxDecoration(
          color: Colors.yellow.withOpacity(.5),
          borderRadius: BorderRadius.circular(10),
          image: const DecorationImage(
            fit: BoxFit.fitWidth,
            image: NetworkImage(
              "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png",
            ),
          ),
        ),
      ),
      title: const Text(
        'Pikachu',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      ),
      subtitle: const Text(
        '⚡️electric',
      ),
      trailing: const Icon(Icons.navigate_next),
      onTap: () => {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) => PokeDetail(),
          ),
        ),
      },
    );
  }
}
```

- settings.dart
```
import 'package:flutter/material.dart';

class Settings extends StatelessWidget {
  const Settings({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: const [
        ListTile(
          leading: Icon(Icons.lightbulb),
          title: Text('Dark/Light Mode'),
        ),
      ],
    );
  }
}
```


第5章：ボトムナビゲーションで設定画面をつくろう

第6章：設定を保存しよう

### ChangeNotifier の導入
ThemeMode の設定が HotRestart した時にしか反映されない問題を解決しましょう．

まず，Flutter の Widget はその内容を更新する必要がなければ再ビルドは実行されません．今回は Settings Widget で行われた変更は MyApp Widget からすればまったく関係のないことですので，MyApp が更新されることはなく，テーマが更新されることはありません．あくまで，Shared Preferences という形でアプリの外の永続化されたデータが更新されただけです．

Settings での変更を即座に MyApp に適用するには以下の方法があります．
- 共通の State にする
- 変更を検知する仕組みを導入する (Notifier)
共通の State にするには StatefulWidget の State をバケツリレーすることになります．値をセットするなら，setState をラップした Setter も一緒にバケツリレーすることになります．
2~3 階層を超えるとちょっと耐えられない実装になってくるのでこれはやめたいですね．

この煩わしさに出会った時が StatefulWidget 以外の手法を学ぶべきタイミングです．
StatefulWidget の次なので，InheritedWidget あたりを触りたい気持ちもあるのですが，InheritedWidget を直接触ることはもう二度とないのではないかと思っているので，大人しく Provider を使用します．Provider は Flutter official 推奨ですので，とりあえずこれでいいかな，という感じです．（もちろん他にもいいライブラリはたくさんあります）

Provider を使う場合，基本的には ChangeNotifier とセットで使用します．ChangeNotifier は Flutter SDK に含まれるクラスですが，Provider は外部から追加するものですね．

Provider は ChangeNotifier をいい感じに使えるようにする ChangeNotifierProvider というものを持っています．これを使います．
ChangeNotifier は Notifier という名の通り、"通知" する仕組みを持ったクラスです．正確には Listener がベースなので， "聞き手"を保持する仕組みといったほうが良いかもしれません．
```
dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  shared_preferences: ^2.2.0
  provider: ^6.0.1
```


```
import 'package:flutter/material.dart';
import '../utils/theme_mode.dart';

class ThemeModeNotifier extends ChangeNotifier {
  late ThemeMode _themeMode;

  ThemeModeNotifier() {
    _init();
  }

  ThemeMode get mode => _themeMode;

  void _init() async {
    _themeMode = await loadThemeMode();
    notifyListeners();
  }

  void update(ThemeMode nextMode) {
    _themeMode = nextMode;
    saveThemeMode(nextMode);
    notifyListeners();
  }
}
```

ChangeNotifier をモデルとして定義します．
コンストラクターで初期化しつつ，get で返します．その後の変更は update で反映しています．

### ChangeNotifierProvider でリッスンしよう

次に ChangeNotifierProvider でラップし，
```
void main() {
  runApp(ChangeNotifierProvider(
    create: (context) => ThemeModeNotifier(),
    child: const MyApp(),
  ));
}
```

使いたいところで Consumer を使用します．
```
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeModeNotifier>(
      builder: (context, mode, child) => MaterialApp(
        title: 'Pokemon Flutter',
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: mode.mode,
        home: const TopPage(),
      ),
    );
  }
}
```
 
この実装の美味しいところはこの mode に対するアクセスが完全に同期的であり，かつその設定値がどこに保存されているのか，どうやって取り出されるのかがすべてブラックボックス化されているところです．MaterialApp としては，「ThemeModeNotifier がもっている mode を取得した」という認知しかなく，その裏で SharedPreferences が使われているか SQLite か Firebase かといったことはまったく気にしなくて良いのです．

このような設計は View と Model の切り離しとしてよく知られており，MVVM と呼ばれています．

これ，とっっっっっても大事です．
はい，本題に戻ります．

とりあえずこれで動きそうに見えるのですが，起動時の初期値をとるタイミングが非同期なので，同期的にビルド処理に入ってしまう MaterialApp に対して、タイミング的にエラーが発生してしまいます．
```
The following LateError was thrown building Consumer<ThemeModeNotifier>(dirty, dependencies:
[_InheritedProviderScope<ThemeModeNotifier?>]):
LateInitializationError: Field '_themeMode@204158082' has not been initialized.

The relevant error-causing widget was:
  Consumer<ThemeModeNotifier>
  ....
```

起動直後に null エラーが出て，その後すぐに非同期処理の結果が得られるので，エラーが出ていてもなんやかんや動きます．なんやかんや動いてしまうので，「まぁ、動いているしええんかな？」という危険な判断をしてしまうかもしれません．注意しましょう．

これはなぜエラーが出ているかというと，ThemeModeNotifier の初期化処理で実行している，SharedPreferences の読み込み処理が非同期だからです．非同期なので，結果が得られるのはちょっと時間がたった後です．一方，MaterialApp の方はそんなの関係なしに Widget の構築にかかります．結果，初期化が完了していない null のままの値が MaterialApp の themeMode にセットされ，エラーとなります．

これを解決する方法としては runApp より前の段階で SharedPreferences の読み込み処理を実行してしまうことです．
```
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final SharedPreferences pref = await SharedPreferences.getInstance();
  final themeModeNotifier = ThemeModeNotifier(pref);
  runApp(ChangeNotifierProvider(
    create: (context) => themeModeNotifier,
    child: const MyApp(),
  ));
}
```

こんな風に，main の中で SharedPreferences のインスタンス取得（非同期部分）を実施してしまい，ThemeModeNotifier のコンストラクターに提供します．コンストラクターは初期化処理においてそのインスタンスを使用することで，同期的に初期化を終えることができます．

ポイントは`WidgetFlutterBiniding.ensureInitialized()`です．

- WidgetsFlutterBinding class - widgets library - Dart API

これは，runApp()を実行する前に Flutter Engine の機能を使いたい場合に呼び出しておくおまじないコードです．Shared Preferences は iOS、Android それぞれ異なるネイティブの機能を駆使して　 Key-Value-Store を実現しています．こういうときには MethodChannel という仕組みが使われているのですが，こういった仕組みは Flutter Engine の機能です．これを runApp 以前に使う場合はこのおまじないコードを実行してください．

Flutter Engine についてはこちらを参照してください．

- Flutter architectural overview


### プログラムの整理
上記のプログラムをそのまま書くとエラーが発生するため一度整理します．

プログラムのディレクトリ構造を次のようにしてください．(libの直下の構成です)
- models/
	- theme_mode.dart
- utils/
	- poke_details.dart
	- poke_list_item.dart
	- poke_list.dart
	- settings.dart
	- theme_mode.dart
- main.dart

- models/theme_mode.dart
```
import 'package:flutter/material.dart';
import 'package:myapp/utils/theme_mode.dart';
import 'package:shared_preferences/shared_preferences.dart';

class ThemeModeNotifier extends ChangeNotifier {
  late ThemeMode _themeMode;

  ThemeModeNotifier(SharedPreferences pref) {
    _init(pref);
  }

  ThemeMode get mode => _themeMode;

  void _init(SharedPreferences pref) async {
    _themeMode = await loadThemeMode(pref);
    notifyListeners();
  }

  void update(ThemeMode nextMode) {
    _themeMode = nextMode;
    saveThemeMode(nextMode);
    notifyListeners();
  }
}
```

- utils/settings.dart
```
import 'package:flutter/material.dart';
import 'package:myapp/models/theme_mode.dart';
import 'package:provider/provider.dart';

class Settings extends StatefulWidget {
  const Settings({Key? key}) : super(key: key);
  @override
  _SettingsState createState() => _SettingsState();
}

class _SettingsState extends State<Settings> {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeModeNotifier>(
      builder: (context, mode, child) => ListView(
        children: [
          ListTile(
            leading: const Icon(Icons.lightbulb),
            title: const Text('Dark/Light Mode'),
            trailing: Text((mode.mode == ThemeMode.system)
                ? 'System'
                : (mode.mode == ThemeMode.dark ? 'Dark' : 'Light')),
            onTap: () async {
              var ret = await Navigator.of(context).push<ThemeMode>(
                MaterialPageRoute(
                  builder: (context) => ThemeModeSelectionPage(mode: mode.mode),
                ),
              );
              if (ret != null) {
                mode.update(ret);
              }
            },
          ),
        ],
      ),
    );
  }
}

class ThemeModeSelectionPage extends StatefulWidget {
  const ThemeModeSelectionPage({
    Key? key,
    required this.mode,
  }) : super(key: key);
  final ThemeMode mode;

  @override
  _ThemeModeSelectionPageState createState() => _ThemeModeSelectionPageState();
}

class _ThemeModeSelectionPageState extends State<ThemeModeSelectionPage> {
  late ThemeMode _current;
  @override
  void initState() {
    super.initState();
    _current = widget.mode;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            ListTile(
              leading: IconButton(
                icon: const Icon(Icons.arrow_back),
                onPressed: () => Navigator.pop<ThemeMode>(context, _current),
              ),
            ),
            RadioListTile<ThemeMode>(
              value: ThemeMode.system,
              groupValue: _current,
              title: const Text('System'),
              onChanged: (val) => {setState(() => _current = val!)},
            ),
            RadioListTile<ThemeMode>(
              value: ThemeMode.dark,
              groupValue: _current,
              title: const Text('Dark'),
              onChanged: (val) => {setState(() => _current = val!)},
            ),
            RadioListTile<ThemeMode>(
              value: ThemeMode.light,
              groupValue: _current,
              title: const Text('Light'),
              onChanged: (val) => {setState(() => _current = val!)},
            ),
          ],
        ),
      ),
    );
  }
}
```

- utils/theme_mode.dart
```
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

int modeToVal(ThemeMode mode) {
  switch (mode) {
    case ThemeMode.system:
      return 1;
    case ThemeMode.dark:
      return 2;
    case ThemeMode.light:
      return 3;
    default:
      return 0;
  }
}

ThemeMode valToMode(int val) {
  switch (val) {
    case 1:
      return ThemeMode.system;
    case 2:
      return ThemeMode.dark;
    case 3:
      return ThemeMode.light;
    default:
      return ThemeMode.system;
  }
}

Future<void> saveThemeMode(ThemeMode mode) async {
  final pref = await SharedPreferences.getInstance();
  pref.setInt('theme_mode', modeToVal(mode));
}

Future<ThemeMode> loadThemeMode(SharedPreferences pref) async {
  final pref = await SharedPreferences.getInstance();
  final ret = valToMode(pref.getInt('theme_mode') ?? 0);
  return ret;
}
```

- main.dart
```
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'models/theme_mode.dart';
import 'utils/poke_list.dart';
import 'utils/settings.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final SharedPreferences pref = await SharedPreferences.getInstance();
  final themeModeNotifier = ThemeModeNotifier(pref);
  runApp(ChangeNotifierProvider(
    create: (context) => themeModeNotifier,
    child: const MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeModeNotifier>(
      builder: (context, mode, child) => MaterialApp(
        title: 'Pokemon Flutter',
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
        themeMode: mode.mode,
        home: const TopPage(),
      ),
    );
  }
}

class TopPage extends StatefulWidget {
  const TopPage({Key? key}) : super(key: key);
  @override
  _TopPageState createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  int currentbnb = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: currentbnb == 0 ? const PokeList() : const Settings(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        onTap: (index) => {
          setState(
            () => currentbnb = index,
          )
        },
        currentIndex: currentbnb,
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: 'home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'settings',
          ),
        ],
      ),
    );
  }
}
```


### まとめ
本章では，以下のことを覚えてください．
- Provider の使い方
- ChangeNotifier の使い方



第7章：設定の変更を即時に反映させる

# 内容・やったこと 


# 具体的な内容 


# ポイント 


# 学習の際の工夫点 


# 使用した記事 


