
# **だから僕はReactを始めた**

## **Agenda**

- □ なぜReact(NextJs)にしたか
- □ Vueと比較してみる
- □ オブジェクト指向とコンポーネント指向
- □ NextJsとReact

## **なぜReact(NextJs)にしたか**

Webフロント開発のフレームワークは、今回紹介するReactJsを始め、Googleによって開発されたAngular、Svelte、Ember.js、Elm、jQuery、Flutter、VanilaJS()、そしてReactとよく比較されるVueJsなどたくさんの種類が存在します。

この中でなぜReactを選んだかと言うと、「友達にオススメされたから」が60%くらいで、残り40%くらいはNextJsという名前とロゴがかっこよかったからというくだらない理由です...

## **Vueと比較してみる**

以下の表のような違いがReactとVueにはあるそうです。仕事でVueJSに触れていましたが、数か月程度。
Reactに関しては個人学習の域から出ていないので大規模に向いているなどは実感できていませんが、ライブラリの多さに関しては実感しています。
特徴のスマホアプリが作れるという点も個人的な推しポイントです。ReactNative+Expoで簡単に作成できるので、気分転換に触っています！

その他、違いとしてあげられるのはReactは世界規模で見ると圧倒的にVueよりは人気であること。日本に限定するとVueの人気が圧倒的だったそうです。(最近はReactも伸びてきているようです)
日本語の解説も多いのはその影響でしょうか

| \ | React.js | Vue.js |
| :-: | :-: | :-: |
| 概要 | UI構築のためのJSフレームワーク | UI構築のためのJSフレームワーク |
| 特徴 | ライブラリが多い、スマホアプリも作れる。 | 学習コストが低い、日本語の情報が豊富。 |
| 作成物 | 大規模なWebシステム | 小規模なWebサービス |
| 使用例 | Facebook、Instagram、Netflix、Paypayなど | note、Retty、Gunosy、sansanなど |
| 設計思想 | 宣言的なのでインタラクティブなUI実装が可能・コードがシンプル。コンポーネント指向なので複雑なUIを実装しやすい | 段階的に開発できるようにゼロから設計。他のライブラリやフレームワークと統合しやすい |

## **オブジェクト指向とコンポーネント指向**

Reactはコンポーネント指向の考え方を前提として作られたライブラリです。コンポーネント指向とは、**ソフトウェア開発において部品ごとに小さく分けて開発する考え方**のことです。

以下の英文はオブジェクト指向とコンポーネント指向の違いについて言及していたものを引っ張ってきました。

```Text
That is to say that component oriented programming specializes Object Oriented
Programming by strictly enforcing and implementing some OO concepts.
Basically the whole idea is to create reusable code - in the form of components - that can be interchanged.
So, component oriented programming heavily relies on: polymorphism, encapsulation,
late binding, inheritance (through interfaces) and most importantly binary re-usability.
```
引用元 : [stack overflow](https://stackoverflow.com/questions/1234283/what-does-it-mean-when-you-say-c-sharp-is-component-oriented-language)

コンポーネント指向はオブジェクト指向のコンセプトに従い、実装を行うことでオブジェクト指向を専門化したもの。
基本的な考えとして、再利用可能なコードで交換可能なコンポーネントの形として作ることを指す。こんな感じのことを言っているようすです！

あー、そーゆーことね　完全に理解した

### **具体例を考えてみる**

いろいろサイトを漁ったりして、オブジェクト指向とコンポーネント指向の違いについて調べてみましたが、国語力の低い自分には難しかったです、、、
そんな私ですが、自分なりに咀嚼した違いについて具体例用いて記述残しておこうと思います。完全に間違えたことは言っていないと思いますが、正しいことを言えているとも思えないので、ご了承ください<(_ _)>

オブジェクト指向とコンポーネント指向の違いですが、よく設計書に例えられるオブジェクト指向に対して、コンポーネント指向は設計書からモノまで作っちゃいました状態だと思っています。

「再利用範囲」、「粒度」、「結合度」に焦点をあてて比較してみます。オブジェクト指向の説明のときに皆さんはよく車作らされていると思いますので、ガソリン車を具体例に考えてみます。ガソリンをエネルギー源に動くものはたくさんありますが、オブジェクト指向で開発を行うとそこであがった設計書はガソリン車を作ることにしか使えません(再利用範囲はアプリ内)。また設計はシート、エンジン、ハンドルといったように細かな部品ごとに行うと思います(粒度が小さい)。

| \ | オブジェクト指向 | コンポーネント指向 |
| :-: | :-: | :-: |
| 再利用範囲 | アプリ内 | アプリ間 |
| 粒度 | 小さい | 中くらい |
| 結合度 | 強い | 弱い |

ここでコンポーネント指向で車の開発を行うことを想定します。ビビッと来て、クリティカルな具体例だと個人的には思っているのですが、マリオカートには開始前にタイヤと車体と飛行ユニットを選ぶ場面があると思います。あれがまさにコンポーネント指向で車の開発を行っていると言えるのではないでしょうか。

実はタイヤのデザインを選んでいるのではなく、"ガソリン駆動のタイヤ"だったり、"電気駆動のタイヤ"を選んでいるとしたら、これはオブジェクト指向に従い実装を行って交換可能なコンポーネントの形で作っていることになります。開発時はタイヤと車体をくっつけることだけ意識すれば良いので結合度はコンポーネント指向では弱いと言えます。

## **NextJsとReact**

最後にNextJsとReactJsって一体何が違うの？について話します。
ReactJsはJavaScriptを用いてUI構築を簡単に行うためのものですが、そんなReactJsをより扱いやすくしたフレームワークがNextJsです。

Reactではページ遷移のためにRouterと呼ばれるものにルーティング設定。特定URLに対して表示するものをあらかじめセッティングしておく必要がありますが、NextJsではpagesディレクトリをルートディレクトリ('/')としてファイルパスがそのままURLとなります。noteページのトップはpages/narunaru/note/index.tsxファイルで実装しているので、URLが/narunaru/noteになっています。ファイルパスがそのままURLになるので、開発者は直感的に実装を行うことが可能となっています。

他には、SSG実装が行える点が挙げられます。SSGとはStatic Site Generatorの頭文字を取ったものになります。
対になるものとして、SSRというものがあり、こちらはServer Side Renderingの頭文字を取ったものになります。

### **スタティック・サイト・ジェネレーターのココがすごい！**

SSGはプリレンダリングをして、クライアント側がWebサイトをリクエストしたらすぐに生成済みのものを返すだけで良くなっていることを指します。
プリレンダリングとは一体何かと言うと、HTMLの部分のみをビルド時にあらかじめ生成しておき、ボタン操作などに必要なJavaScriptの部分はリクエストを受けてから読み込むことです。

つまり何が凄いのか、UIに関わるHTMLはあらかじめ生成済みなので、超高速にWebサイトが表示される点です。

![SSG](https://nextjs.org/static/images/learn/data-fetching/pre-rendering.png)

対して、SSRは名前の通りサーバー側でレンダリングしています。クライアント側がサイトを訪問し、リクエストを投げたタイミングでサーバー側でレンダリングし、HTMLを生成しています。なので、SSGに比べて速度は落ちます。

じゃあSSGだけあれば良いじゃないかと思うかと思いますが、もちろんデメリットも存在していて、SSGはビルドしたタイミングでレンダリングをしてしまうので、更新頻度が高いページには不向きになっています。なので、ブログや商品ページ、ドキュメントなどの静的なページに対してはSSGで実装。プロフィールやSNSのタイムラインのような更新頻度が高いページに対してはSSRで実装するといったように使い分けると良いでしょう！

![SSR](https://nextjs.org/static/images/learn/data-fetching/no-pre-rendering.png)

だから僕はReactを始めた


# **ドメイン駆動設計とは**

## **はじめに**

ドメイン駆動設計(Domain Driven Design)とはエリック・エヴァンスが提唱した、「ユーザーが従事する業務に合わせてソフトウェア開発する手法、ドメイン駆動設計」に端を発する、ドメイン(システムの対象領域)知識のソフトウェアの反映に焦点をあてた設計手法。ユーザーファーストの考え方。

## **ドメイン駆動設計とは具体的に**

ソフトウェアを開発する上で、ソフトウェアを利用するユーザーを取り巻くセカイについて知ることはとても重要なことですが、開発者が学び得た、知識は必ずしもすべて有益なものとは限りません。利用者にとって役に立つものを開発するためには、価値のある知識と無価値な知識を見極めて、コードに落とし込んでいく必要があります。

必要な知識か不必要な知識かどうかを見極めるために必要なことは利用者を取り巻くセカイについて学習していくことが必須ですが、何が重要な事柄かどうかはそのセカイのありように左右されてしまいます。価値あるソフトウェアを構築するためには利用者の問題をキャッチして、解決への最善手を考え続ける必要があります。**ドメイン駆動設計**とは、そういった洞察を繰り返し行いながら設計をし、ソフトウェア利用者を取り巻くセカイと実装を結びつけることを目的としています。

## **ドメイン知識に焦点をあてた設計手法**

そもそもドメインとは何か？ドメインとは「領域」という意味を持つ言葉で、ソフトウェア開発におけるドメインとはプログラムを適用する対象となる領域のことを言います。では対象となる領域とは一体なんなのかについて、例えばカメラ業界には”被写体”や”撮影環境”といった概念が存在しますが、これらがドメインに該当します。つまり**ドメイン知識に焦点をあてた設計手法**とは、ソフトウェア利用者が住むセカイの概念や事象などを理解して、その中から問題解決に役立つものをピックアップし、実装に落とし込んでいく方法のことを言います。

## **ドメインモデリング**

ドメインを実装に落とし込むためにはドメインそのもののことだったり、ドメインの関係性などの理解を深めないといけませんが、そんなときに登場するのが**ドメインモデリング**です。ドメインモデリングの手法の一つとしてsudoモデリングというものが存在します。

## **sudoモデリング**

sudoモデリングとは「システム関連図(s)」、「ユースケーズ図(u)」、「ドメインモデル図(d)」、「オブジェクト図(o)」の4つのモデル図の頭文字を取ったものです。

### **1.システム関連図とは**

開発するシステムと、それに関連するアクターや外部システムとの関連を示す図です。

例えばコミケシステムにおいて、応募者(アクター)は応募ページからサークル情報の登録や出品したい創作物の登録などを行います。また、コミケ運営(アクター)は選考管理システムから登録情報を見たり、選考状況や結果日時などをサークルに対してメールを送ったりします。

![システム関連図](/images/note/system.png)

### **2.ユースケース図**

ユーザーの要求に対してシステムがどのように振る舞うかを定義する図です。ユースケース図を作成するときには、ドメインモデル図作成の対象となるシステムを限定します。

今回は選考管理システムに焦点をあてると、サークル情報の登録を行ったり、選考状況や結果発表日時の設定を行ったりします。

![ユースケース図](/images/note/usecase.png)

### **ドメインモデル図**

ドメインモデル図はクラス図の簡易版のようなものです。ただしクラス図と違って属性は重要なものだけを記述すればよく、メソッドは書く必要がありません。

### **オブジェクト図**

オブジェクト図はドメインモデル図の具体例を図に書き起こしたものです。

![ドメインモデル図](/images/note/domain.png)

▲ドメインモデル図

![オブジェクト図](/images/note/object.png)

▲オブジェクト図


参考にしたサイト : 
[簡単にできるDDDのモデリング-ドメイン駆動設計](https://little-hands.hatenablog.com/entry/2022/06/01/ddd-modeling)

ドメイン駆動設計


# **Redux Library**

## **Reduxとは**

ReduxとはUIの状態(state)を管理するための状態管理ライブラリ。  
FaceBook社が提唱しているFluxというデータフロー管理のためのアーキテクチャパターンを採用しています。

Webアプリは、アプリケーション全体にまたがってデータやオブジェクトを保存したり、共有したりする必要があります。  
状態管理ライブラリがない場合、親コンポーネントから子コンポーネントにPropsの形で受け渡すが、規模が大きくなったり、階層の違うコンポーネントに対して渡すときには慎重に行わないと行けず、不具合の原因になりうる。

そんな不安定で管理が複雑な状態を改善することができるのが、Reduxとなります。  
Reduxにはこれから紹介する、「3つのコンセプト」と「4つの要素」によって実現しています。

## **3つのコンセプト**

1. 信頼できる唯一の情報源であること。

Reduxではアプリケーションの状態をStateと呼ばれるオブジェクトツリーで管理しており、Storeがそれを保持しています。  
後ほど具体例を記述するが、Stateはオブジェクトを宣言するのと同じように宣言的で可視化されているので、どのようなデータを管理しているのかが簡単に把握できます。

2. Read Only読み取り専用であること。

Stateに直接アクセスをして値を書き換えることは基本的には許可されていなく、値を書き換えるためにはActionと呼ばれるオブジェクトを発行しなくてはいけません。そのような一元化した仕組みにすることで意図しないタイミングでの値の書き換わりなどを防ぎ、不具合が起きる可能性を低めています。

3. 状態の管理は純粋関数で行われること。

Reducerという純粋関数でStateの変更を行っています。  
先ほどちらっと出てきたActionというオブジェクトとStoreで保持されているStateを用いて、新しいStateを生成します。


# **Modalウィンドウ用Redux**

警告ウィンドウなどユーザーに操作を促すために使われるModalウィンドウですが、今回はこのModalウィンドウの実装をコンポーネントで用意し、それを必要なページにimportし、データをPropsの形で渡して実現するのではなく、状態管理ライブラリ**Redux**を用いて実現してみます。
Reduxを使うことのメリットとしては、いちいちimportする必要がなくなるくらいかもしれませんが、(あとは初期設計ではいらないと思ったが、後付けで必要になったときにPropsを渡すような親子関係ではなく、完全に分離されているので気軽に導入しやすいとか？)Reduxで調べると出てくる解説の多くはTODOリスト作ってみようだと思うので、こういったこともできるのか、ふむふむと思っていただけたら幸いです。

## **ディレクトリ構成**

```Text
src―redux
     |―store.ts
     |―modal
        |―modal.reducer.ts
        |―modal.types.ts
```

## **store.ts**

```ts
import { configureStore } from '@reduxjs/toolkit'
import modalReducer from './modal/modal.reducer'

export const store = configureStore({
  reducer: {
    modal: modalReducer
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [
          'modal/openModal',
        ],
        ignoredPaths: [
          'modal.modalInfo.buttonItems'
        ]
      },
    }),
})

export type RootState = ReturnType<typeof store.getState>
export default store
```

## **modal.reducer.ts**

```ts
import { createSlice } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import * as ModalType from './modal.types'


const initialState = {
  isModalOpen: false,
  modalInfo: {
    title: '',
    style: {
      width: 390,
      height: 260,
      fSize: 25,
    },
    buttonItems: [{
      btnTitle: '',
      callback: Function.prototype,
    }],
    component: '',
  }
} as ModalType.ModalState

const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal(state, action: PayloadAction<ModalType.ModalInfo>) {
      state.isModalOpen = true
      const payload = {...action.payload}
      state.modalInfo.title = payload.title
      state.modalInfo.style = payload.style! ? payload.style
                                             : initialState.modalInfo.style
      state.modalInfo.buttonItems = payload.buttonItems! ? payload.buttonItems.slice()
                                                         : initialState.modalInfo.buttonItems.slice()
      state.modalInfo.component = payload.component
    },
    closeModal(state) {
      state.isModalOpen = false
    },
  }
})

export const modalReducer = modalSlice.actions
export default modalSlice.reducer
```

## **modal.types.ts**

```ts
export interface ModalStyle {
  width: number,
  height: number,
  fSize: number,
}

export interface ButtonItems {
  btnTitle: string,
  callback: () => void,
}

export type ModalInfo = {
  title: string,
  style?: ModalStyle,
  buttonItems?: Array<ButtonItems>,
  component: string,
}

export interface ModalState {
  isModalOpen: boolean,
  modalInfo: {
    title: string,
    style: ModalStyle,
    buttonItems: Array<ButtonItems>,
    component: string,
  },
}
```

# **How to use redux**
以下、タイトルとサイズを状態管理して可変にしているモーダルウィンドウ  
useSelectorでStateの値を取得、Vuexのgettersみたいなもの  
useDispatchでStateの値を変更する、VuexのActions,Mutationsみたいなもの

## **モーダルウィンドウを呼び出しているComponent**

```ts
const dispatch = useDispatch()
const openModal = () => {
  const modalInfo= {
      title: 'Notice',
      style: {
        width: 900,
        height: 600,
        fSize: 50,
      },
      component: 'commingsoon'
    }
    dispatch(modalReducer.openModal(modalInfo))
}
```

## **Modal.tsx**
```ts
import { useSelector, useDispatch } from 'react-redux'
import { RootState } from '@/redux/store'
import { modalReducer } from '@/redux/modal/modal.reducer'
import { CSSTransition } from 'react-transition-group'
import styles from '@/styles/components/Modal.module.sass'
import { ButtonItems } from '@/redux/modal/modal.types'

// ViewComponent
import ComingSoon from './comingsoon'

// *** How to use Modal Window ************************** //
//
// const openModal = () => {
//   const modalInfo = {
//     title: 'This is sample modal',
//     style: { //default // other recommended styles
//       width: 390,      // 600, 900
//       height: 260,     // 400, 600
//       fSize: 25,       // 35,  50
//     },
//     buttonItems:[{
//       btnTitle: 'OK',
//       callback: () => clickOk(),
//     }],
//     component: 'commingsoon',
//   }
//   dispatch(modalReducer.openModal(modalInfo))
// }
//
// ****************************************************** //

interface CompProps {
  childComp: string
}

function ViewComponent(props: CompProps) {

  switch(props.childComp) {
  case 'commingsoon':
    return <ComingSoon/>
  default:
    console.log('Error, not found component')
    return <></>
  }
}

interface BtnProps {
  btnItems: Array<ButtonItems>,
  btnFont: number,
}
function ExecButton(props: BtnProps) {
  const execButton = props.btnItems.map((el) =>
    <li key={el.btnTitle}
        className="inline ml-3 list-none"
        onClick={el.callback}
    >
      <span style={{fontSize: props.btnFont / 2 + 'px'}}>
        {el.btnTitle}
      </span>
    </li>
  )

  return (
    <>{ execButton }</>
  );
}

const Modal = () => {
  const isModalOpen = useSelector((state: RootState) => state.modal.isModalOpen)
  const modalInfo = useSelector((state: RootState) => state.modal.modalInfo)
  const dispatch = useDispatch()
  
  const closeModal = () => {
    dispatch(modalReducer.closeModal())
  }

  return (
    <CSSTransition
      in={isModalOpen}
      timeout={390}
      unmountOnExit
      styles={{zIndex: 20}}
      classNames={{
        enter:       styles['modal-enter'],
        enterActive: styles['modal-enter-active'],
        enterDone:   styles['modal-enter-done'],
        exit:        styles['modal-exit'],
        exitActive:  styles['modal-exit-active']
      }}>
      <div>
        <div className={styles['modal-overlay']} onClick={closeModal}>
          <div style={{width: modalInfo.style.width + 'px', 
                       height: modalInfo.style.height + 'px',}}
               onClick={(event) => event.stopPropagation()}>
              <div className={styles['modal-content']}>
                <header className="flex h-1/6 justify-center">
                  <span className="font-bold"
                        style={{fontSize: modalInfo.style.fSize + 'px'}}>
                    {modalInfo.title}
                  </span>
                </header>
                <div className="h-2/3">
                  <ViewComponent
                    childComp={modalInfo.component} />
                </div>
                <footer className="flex h-1/6 items-center justify-end pr-8">
                  <ExecButton
                    btnItems={modalInfo.buttonItems}
                    btnFont={modalInfo.style.fSize} />
                  <li className="inline ml-3 list-none"
                      onClick={closeModal}>
                    <span className="font-bold hover:underline"
                          style={{fontSize: modalInfo.style.fSize / 2 + 'px'}}>Close</span>
                  </li>
                </footer>
              </div>
          </div>
        </div>
      </div>
    </CSSTransition>
  )
}
export default Modal
```

参考ページ : <https://reffect.co.jp/react/redux-toolkit#Redux_Toolkit>

参考ページ : <https://qiita.com/10mi8o/items/5b5ded0504b0f28ac611>


Redux Library


# **NextJsの基礎**

## **NextJsを使うメリット**  

### **1.クライアントのPCに依存せずにレンダリングが可能**

サーバー側であらかじめHTMLを構築しておくことが可能で、クライアント側は必要に応じてJavaScriptを読み込むだけで良くなっています。
SSGやSSRがキーワード、Static Site Generate / Server Side Rendering

### **2.直感的なルーティング設計ができる**

Reactはrouterを用いていたが、NextJsではPageディレクトリに置けるPathがそのままURLになるので、設計が楽になっています。

### **3.ページ読み込み速度の上昇およびSEO対策**

1と重複するが、サーバーサイド側であらかじめHTMLが構築されているので、読み込みの速度が早く、それに伴ってSEO対策にもつながっています。

## **プリレンダリングとは**

HTMLのみあらかじめ読み込まれている状態のことです。

ボタン操作の処理に必要なJavaScriptはあとから読み込まれます。

## **SSGとSSRの違い**

### **SSG(Static Site Generator)とは**

ビルドしたときにHTMLの雛形が生成されている状態になっています。

クライアントがWebサイトに訪れてリクエストが投げられたらすでに生成済みのものを返すだけで良くなっています。

### **SSR(Server Side Rendering)とは**

サーバー側でレンダリングしてくれます。
クライアント側がサイトに訪れようとリクエストを投げるとサーバーがHTMLだけのページを生成してリクエストを投げたクライアントに返します。
SSGとの違いはリクエストのタイミングでレンダリングをしている点となります。

## **SSG/SSRの使い分け**

ページの更新頻度が低いものがSSG実装に適しており、例えばブログや商品ページ、ドキュメントなど静的なページに対しては最速で返信ができるSSGを使うことが多いです。

対して、プロフィールやSNSのタイムラインなど更新頻度が高いものはSSRが良いです。

もう一度書きますが、SSGはビルド時にHTMLを生成するので、後から書き換えが簡単ではありません。そのため更新頻度が高いものは適していない。という話につながります。

NextJsはSSGとSSRはページ単位で使い分けができます。
公式によると基本はSSGを用いてくださいとのことです。

NextJsの基礎


# **getLayoutの実装**

## **Layouts**

ページ上部にナビゲーションバーがどのページに遷移しても存在しているのをWebページでよく見かけるかと思います。

その実現方法に対する設計は2パターン存在すると思います。
- どのページも同じものを表示したい。
- 一部ページでは違うものを表示したい。

今回、以下に記述してあるサンプルコードは2つ目の「一部ページでは違うものを表示したい。」の実現方法となっています。

公式リファレンス : <https://nextjs.org/docs/basic-features/layouts>

## **navbar.tsx**
```typescript
import Link from "next/link";
import { ReactNode } from "react";
import styles from '@/styles/components/NavBar.module.sass'

interface Props {
  children: ReactNode;
}

const NavBar = ({ children }: Props) => {
  return (
    <>
    <div className={styles.navbar}>
      <nav className="flex absolute w-full h-20 justify-between top-0 left-0">
        <div>
          <Link href="/">
            <img className="h-full"
                 src="/images/sample.png"
                 alt="projectSelf"/>
          </Link>
        </div>
        <div className="flex mr-5">
          <li><Link href="/sample/profile">Profile</Link></li>
          <li><Link href="/sample/note">Note</Link></li>
        </div>
      </nav>
    </div>
    { children }
    </>
  )
}
export default NavBar
```

## **_app.ts**
```typescript
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import '@/styles/globals.sass'
import NavBar from '@/components/layouts/navbar'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function App({ Component, pageProps }: AppPropsWithLayout) {
  
  if(Component.getLayout) {
    return Component.getLayout(
      <Component { ...pageProps } />
    );
  }

  return (
    <NavBar>
      <Component { ...pageProps } />
    <NavBar>
  )
}
```

**各コンポーネントでの実装方法**

個別のレイアウトを設定したい場合は以下のようにXXX.getLayoutで記述してあげることで、実現可能です。

```typescript
import type {ReactElement} from 'react'
page.getLayout = (page: ReactElement) => {
  return <layout>{page}</layout>
}
```

getLayoutの実装


# ***SSGの実装***

## **ディレクトリ構成**
```Text
src――lib
    |  |―postblog.ts // ファイルをやり取りをする
    |
    |―pages
       |―main
          |―blog.tsx // ブログの一覧が表示されているページ
          |―blog
              |―[article].tsx // 任意のページに対して行う
```

## **postblog.ts** 

ファイルを読み込んだりとデータを扱う役割

```typescript
import path from 'path'
import fs from 'fs'
import matter from 'gray-matter'

interface BlogInfo {
  readonly article: string,
  readonly title: string,
  readonly date: string,
  readonly thumbnail: string,
  readonly content: string,
}

const blogDirectory = path.join(process.cwd(), 'assets/blog')

const getAllArticleId = async () => {
  const blogList = fs.readdirSync(blogDirectory)
  return blogList.map(el => {
    return {
      params: {
        article: el.replace(/\.md$/, '')
      }
    }
  })
}

const getAllArticleInfo = async () => {
  const blogList = fs.readdirSync(blogDirectory)
  let articleDataList = Array<BlogInfo>(blogList.length)

  blogList.forEach((el, index) => {
    const article = el.replace(/\.md$/, '')
    const fullPath = path.join(blogDirectory, el)
    const blogData = fs.readFileSync(fullPath, 'utf-8')
    const { data, content } = matter(blogData)

    articleDataList[index] = {
      article  : article,
      title    : data.title,
      date     : data.date,
      thumbnail: data.thumbnail,
      content  : content,
    }
  })
  sortBlogList(articleDataList)
  
  return articleDataList
}

const getArticleData = async (slug: string) => {
  const fullPath = path.join(blogDirectory, `${slug}.md`)
  const blogData = fs.readFileSync(fullPath, 'utf-8')
  const { data, content } = matter(blogData)

  const articleData: BlogInfo = {
    article  : slug,
    title    : data.title,
    date     : data.date,
    thumbnail: data.thumbnail,
    content  : content,
  }

  return articleData
}

export const sortBlogList = (blogList: Array<BlogInfo>) => {
  const blgLen = blogList.length - 1
  for(let i = 0; i < blgLen; i++) {
    for(let j = blgLen; i < j; j--) {
      if(blogList[j].date > blogList[j - 1].date) {
        let tmp = blogList[j]
        blogList[j] = blogList[j - 1]
        blogList[j - 1] = tmp
      }
    }
  }
}

export { getAllArticleId, getAllArticleInfo, getArticleData }
```
## **blog.tsx**

サムネなど表示して、クリックすると各ブログ記事へ飛ぶリンクなどが書いてある。  
ここにもSSGの実装がある
```typescript
import Head from 'next/head'
import Link from 'next/link'
import { InferGetStaticPropsType } from 'next'
import type { ReactElement } from 'react'
import { getAllArticleInfo } from '@/lib/postblog'
import NavBar from '@/components/layouts/navbar'
import MikuFooter from '@/components/layouts/mikufooter'
import Sakura from '@/components/layouts/sakura'
import styles from '@/styles/pages/Blog.module.sass'

type Props = InferGetStaticPropsType<typeof getStaticProps>

export const getStaticProps = async () => {
  const articleDataList = await getAllArticleInfo()

  return {
    props: {
      articleDataList
    },
  }
}

const Blog = ({ articleDataList }: Props) => {

  const editDate = (date: string) => {
    // date : YYYYMMDD
    const year = date.slice(0, 4)
    const month = date.slice(4, 6)
    const day = date.slice(6, 8)
    return year + '-' + month + '-' + day
  }

  return (
    <div className="mt-28">
      <Head>
        <title>Blog | Next/React</title>
        <meta name='discription' content='SSG Blog Page created by NextJs' />
      </Head>
      <Sakura/>
      <section className="text-center mb-12">
        <p className="text-8xl font-bold underline decoration-4">BLOG</p>
        <p className="text-xl italic pt-4">
          This page is for my blog and writing down what learned self learning<br/>
          I'm sorry, if I made a mistake... pls go easy on me...
        </p>
      </section>
      <section className="mb-12">
        <div className={styles.grid}>
          {articleDataList.map(el =>
            <article key={el.article}>
              <Link href={'./blog/'+`${el.article}`}>
                <img src={el.thumbnail}
                     alt={el.thumbnail} />
              </Link>
              <Link href={'./blog/'+`${el.article}`}>
                <p className="text-2xl font-bold pt-4 hover:underline">{el.title}</p>
              </Link>
              <small className="text-base text-gray-400">{editDate(el.date)}</small>
            </article>
          )}
        </div>
      </section>
    </div>
  )
}

Blog.getLayout = (Blog: ReactElement) => {
  return (
    <>
      <NavBar>
        { Blog }
      </NavBar>
      <MikuFooter/>
    </>
  )
}
export default Blog
```
## **[article].tsx**

任意のページについて処理を行う、SSGの実装におけるメインの話はここで行われている
```typescript

import Head from 'next/head'
import ReactMarkdown from 'react-markdown'
import { getAllArticleId, getArticleData } from '@/lib/postblog'
import { InferGetStaticPropsType, GetStaticPaths, GetStaticPropsContext } from 'next'
import styles from '@/styles/pages/BlogArticle.module.sass'
import CodeBlock from '@/components/codeblock'
import Sakura from '@/components/layouts/sakura'

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = await getAllArticleId()
  return {
    paths,
    fallback: false,
  }
}

export const getStaticProps = async (context: GetStaticPropsContext<{article: string}>) => {
  const articleData = await getArticleData(context.params!.article)
  return {
    props: {
      articleData,
    }
  }
}

type Props = InferGetStaticPropsType<typeof getStaticProps>

const BlogArticle = ({articleData}: Props) => {
  return (
    <div>
      <Head>
        <title>Blog | {articleData.title}</title>
        <meta name='discription' content='This page for writing down what learned self learning' />
      </Head>
      <Sakura/>
      <ReactMarkdown
        className={styles.markdown}
        children={articleData.content}
        components={{
          code: CodeBlock
        }}
      />
    </div>
  )
}
export default BlogArticle
```

SSG実装のブログページ


# **Python 配列型メモ**

## **list型に関連するメソッドや知識まとめ**

Pythonの配列型に関することで調べたことをメモしておくページです。
List型とは配列を扱うものになります。

## **List型への値のSet方法**

### **最後に挿入したい**

リストの末尾に新しい要素を追加したいときにはappend()を用いることで可能です。

```python
list = [1, 2, 3, 4, 5]
list.append(6)  // [1, 2, 3, 4, 5, 6]
```

### **指定箇所に挿入したい**

insert()を用いることで指定した箇所に値を挿入することができます。

```python
list = [1, 2, 3, 4, 5, 6]
list.insert(3, 7) // [1, 2, 3, 7, 4, 5, 6]
```

### **最後を削除したい**

Pop()を使うことでList型の最後の値を削除することができる。
この関数は戻り値に削除した値を返します。

```python
list = [1, 2, 3, 7, 4, 5, 6]
res = list.pop() // [1, 2, 3, 7, 4, 5]
print(res) // 6
// pop(X)と指定すればそこを取り出せる
list.pop(0) // 1
```

### **指定箇所を削除する**

delを用いることで削除が可能となっています。
以下サンプルのように添え字で要素のインデックスを指定してあげることで、その要素を削除可能ですが、
添字指定を忘れてしまうと配列そのものが消えてしまうので注意が必要です。

```python
list = [1, 2, 3, 7, 4, 5]
del list[2] // [1, 2, 7, 4, 5]
```

### **指定した値を削除できる**

remove()関数を用いることで指定した値を削除することができます。
もし指定した値がない場合はエラーとなります。

```python
list = [1, 2, 7, 4, 5]
list.remove(7) // [1, 2, 4, 5]
list.remove(7) // ValueError: list.remove(x): x not in list
```

### **list同士の連結**

List同士の連結は加算するときのように+=で記述することが可能です。
もしくは片方のリストに対してextend()することでの連結方法もあります。

```python
li1 = [1, 2, 3]
li2 = [4, 5, 6]
li1 += li2
print(li1) // [1, 2, 3, 4, 5, 6]
li1.extend(li2) // [1, 2, 3, 4, 5, 6]
```

### **検索値が何番目にあるかを返してくれる**

index()関数を用いることで指定した値が何番目の要素であるかを返してくれる。

```python
li = [1, 2, 3, 4, 5]
li.index(3) // 2
```

### **検索値がいくつあるか返してくれる**

count()関数を用いることで指定した検索値がListの中にいくつあるかを返してくれる。

```python
li = [1, 2, 3, 4, 5, 3, 3, 5]
li.count(3)  // 3
```

### **リストに検索値が存在しているか確認できる**

if 検索値 in listの形式でif文判定を書くことで、
Listの中に検索値があればTrue、無ければFalseを返す制御が書くことができる。

```python
li = [1, 2, 3, 4, 5, 3, 3, 5]
if 2 in li
    print('exist')
```

### **リスト内のソート**

Listの中をソートすることができます。その方法は様々であり、以下のような方法があります。

```python
li = [2, 3, 1, 4, 5, 3, 3, 5]
// 通常のソート
li.sort() // [1, 2, 3, 3, 3, 4, 5, 5]
// 降順
li.sort(reverse=True) // [5, 4, 3, 3, 3, 2, 1]
// 反転
li = [2, 3, 1, 4, 5, 3, 3, 5]
li.reverse() // [5, 3, 3, 5, 4, 1, 3, 2]
```

### **指定文字で切り分け格納**

以下のように文章が入ったstring型の変数を指定した値で切り分けて、Listの要素として詰めることができます。

```python
word = 'My name is'
word.split(' ') // ['My', 'name', 'is']
```

### **指定文字で連結もできる**

上記とは逆でListの中にある要素を指定した値で連結して新しい値として扱うことも可能です。

```typescript
word = ['My', 'name', 'is']
word1 = ' '.join(word)
print(word1) // My name is
```

## **リストのコピーは参照渡し**

### **リストや辞書型は参照渡しになる、数値や文字列は値渡し**

要素に1,2,3,4が入ったList型変数"i"を用意します。
そしてj = iとiの中身をjに入れます。
ここでjの要素に対して値の変更を行います。(j[0] = 100) 
直感的にはここでiの値を出力すると、初期化のタイミングで格納した[1,2,3,4]が出力されるように感じますが、
タイトルにもあるようにList型は参照渡しとなるため、結果は[100,2,3,4]となります。

実際にそのListのアドレスをid()関数で表示させてみるとiもjも同じ場所を示しているのがわかります。

```typescript
i = [1,2,3,4]
j = i
j[0] = 100
print(i) // [100,2,3,4]

// id()でアドレス的なものを知ることができる
id(i) // 2308790429248
id(j) // 2308790429248
```

### **参照渡しを避けるには**

参照渡しを避けて、リスト型や辞書型変数を扱う方法は、一般的にcopy()関数を使います。
もしくは書式list[start:end]の形で場所指定でコピーすることができます。

```typescript
i = [1,2,3,4]
j = copy(i)
j = i[:]
```

## **タプル型(tuple)**

tuple型変数とは新しく値を代入することが出来ない配列のようなものです。  
書き方はリスト型は角括弧[]だったところを丸括弧()にするだけです。タプル型もリスト型で使うことが出来た関数類は同様に使用できます。

タプル型は値を書き換えることが出来ないので、t1[2]=2のように記述するとエラーとなりますが、タプル型の中にある配列等に対するアクションは受け付けるので、t2[0][0]=100はエラーとならず、出力すると([100,2,3], [4,5,6])となります。

```typescript
t1 = (1,2,3,4,5,6)
// リスト型のときに使えた関数を持っている
t1[2] // 3
t1.index(4) // 3

t2=([1,2,3], [4,5,6])
t2[0][0] = 100
```

### **tupleの使いどころ**

定数定義や値の入れ替えをする際に用いることができます。

例えば以下のように範囲を定義する目的でrangeという最小最大の値が格納されたタプル型を用意しておくことで、後々min,maxと個別の値を取得する際にリテラルに書くことがなくなり、不具合を起こしにくくなります。

```typescript
range = 1,100
min, max = range
print(min) // 1
print(max) // 100
```
また、ソートのときなどによくある値の入れ替えのときにも役立ち、通常temp変数を用意して、一時的に値を避難させて入れ替える行為もタプル型を用いることで簡潔に書くことができます。

```typescript
// 数値の入れ替えとかに使える
a = 100
b = 200
a, b = b, a
```

Python 配列


# **非同期処理 Promise async/await**

## **非同期処理の歴史**

1. ・初期非同期処理
2. ・Promiseの誕生
3. ・async/await

## **初期非同期処理**

非同期処理と言ったら"Promise"や"aync/await"を思い浮かべるが、それらは「ES2015(ES6)」で追加された機能であり、2015年以前は非同期処理はコールバック関数で実現していました。

例) setTimeout()
```ts
setTimeout(() => console.log('First'), 1000)
console.log('Second')

// 出力結果
Second
First
```

しかしバックグラウンド処理が増えるとソースコードの記述がとても複雑になっていき、「**コールバック地獄**」と呼ばれることとなりました。

例)コールバック地獄
```ts
type Callback<T> = (result: T) => void

const Api1 = (callback: Callback<number>) => {
  setTimeout(() => {
    callback(1)
  }, 1000)
}

const Api2 = (result: number, callback: Callback<number>) => {
  setTimeout(() => {
    callback(result + 1)
  }, 1000)
}

const Api3 = (result: number, callback: Callback<number>) => {
  setTimeout(() => {
    callback(result + 2)
  }, 1000)
}

// ネストし過ぎていてわかりづらい...
Api1((result1) => {
  Api2(result1, (result2) => {
    Api3(result2, (result3) => {
      console.log(result3) // 4
    })
  })
})
```

## **Promiseの誕生**

「ES2015(ES6)」で追加された非同期処理を扱うオブジェクト。  
Promiseオブジェクトを返し、resolveやrejectを実行します。

例) Promise
```ts
new Promise((resolve, reject) => {
  try {
    fs.readFile('promise.md', (err, data) => resolve(data))
  } catch (err) {
    reject(err)
  }
})
```

resolveやrejectすると次の処理に行けます。
次の処理に行くには「.then」で処理を書いていきます。

これによりネストして読みづらくなっていたコールバック地獄を抜け出すことになりました。  
コールバック地獄のときに例にあげた処理をPromiseを使ってリメイクしてみます。

```ts
const ApiPromise1 = (): Promise<number> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(1)
    }, 1000)
  })
}

const ApiPromise2 = (result: number): Promise<number> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(result + 1)
    }, 1000)
  })
}

const ApiPromise3 = (result: number): Promise<number> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(result + 2)
    }, 1000)
  })
}

ApiPromise1()
.then((result)=> {
  return ApiPromise2(result)
})
.then((result) => {
  return ApiPromise3(result)
})
.then((result) => {
  console.log(result) // 4
})
```

## **async/await**

Promiseを使った書き方よりももっと簡単に記述することを可能にしたのが、async/awaitです。

### **asyncとは**

非同期関数を定義する関数宣言のことで、書き方は以下の通りです。
```ts
async function asyncFunc() {} // function式
const asycnFunc = async() => {} // アロー関数
```
async functionにすることでどう変わるのか...
- 関数を呼び出すとPromiseオブジェクトを返す。
- 処理を行い、値をreturnした場合、Promiseは戻り値をresolveする。
- 処理を行い、例外や値をthrowした場合、Promiseはその値をrejectする。

### **awaitとは**

awaitとは、指定した関数のPromise結果が返されるまでasync functionの処理を一時停止するものです。

役割の通り、asyncを一時停止するので、awaitはasyncとセットでないと利用できません。

asyncとawaitのことがわかったところで、Promiseを使った具体例をasync/awaitを使った処理にリメイクしてみます。

```ts
const main = async () => {
  const result1 = await ApiPromise1()
  const result2 = await ApiPromise2(result1)
  const result3 = await ApiPromise3(result2)
  console.log(result3) // 4
}

main()
```

Promiseでの実装でも比較的見やすくはなっていたが、上記例を見たらわかるように、async/awaitを使うと同期処理のような記述方式になっておて、見慣れた姿ではないでしょうか

非同期処理のあれこれ


# **`要素の配置位置に関連するCSS`**

## **float**

公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/CSS/float>

要素を包含するブロックが左右どちらかに沿うように配置し、テキストやインライン要素が周りを回り込むように定義できる
text-alignやrightとかで左右に寄ってくれないな...など思ったらこれを使ってみると良いかもしれない


## **block/inline/inline-blockの違いについて**

block要素は<div>や<section>タグのようなコンテンツをまとめるための要素
- 縦に要素が並んでいく
- 幅と高さの調整ができる
- 余白の調整ができる
- 要素の配置を指定できない

inline要素はブロック要素の内容に用いられる
- 要素が横に並んでいく
- 幅と高さの調整が出来ない。
- 上下の余白が調整できない
- 要素の配置を指定できる

inline-block要素はblock要素とinline要素の中間
- 要素が横に並んでいく
- 幅と高さの調整ができる
- 余白の調整ができる
- 要素の配置を指定できる

参考ページ : <https://zero-plus.io/media/css-display-format-difference/>

## **要素が中央に寄ってくれない...ToT**

text-align: center が上手く効いてくれないことがあった...
text-alignはちょっと扱うのが難しいプロパティで、どこに対して中央なのかを示してあげないといけない

【条件】
- 中央寄せしたい要素がインライン要素であること。
- css記述箇所はブロック要素の親に書く必要がある。

NG例)
```html
<span {text-align: center;}">sample</span>
```
上記だとspanがインライン要素であることで条件1つ目は満たしているが、2つ目の方が達成できていないため、中央に寄らない

OK例)
```html
<p {text-align: center;}><span>sample</span></p>
```
上記のようにブロック要素でラップして、そちらに中央寄せの記述をしてあげる

参考ページ : <https://cotodama.co/css-center/#text-aligncenter-2>

## **display: flexについて**

display: flex;はブロック要素を横並びに並べてくれる

CSSのポジションに関すること


# **Vueでアニメーションを実装**

## **Transitionタグについて**

Vueでアニメーションを実現するには、ページ内のアニメ―ションをつけたい要素をTransitionタグで囲みます。そうすることで、タグで囲まれた要素に対してCSSで記述していくためのクラスが自動的に付与されていきます。

## **状態遷移**

- **v-enter	enterの開始状態。**  
要素が挿入される前に追加され、要素が挿入された後に削除される。

- **v-enter-active	enterの活性状態。**  
要素が挿入される前に追加され、トランジション/アニメーションが終了すると削除される。

- **v-enter-to	enter の終了状態。**  
要素が挿入された後に追加され、トランジション/アニメーションが終了すると削除される。

- **v-leave	leaveの開始状態。**  
要素の削除が始まる前に追加され、開始直後に削除される。

- **v-leave-active	leaveの活性状態。**  
要素の削除が始まる前に追加され、トランジション/アニメーションが終了すると削除される。

- **v-leave-to	leaveの終了状態。**  
要素の削除が始まった直後に追加され、トランジション/アニメーションが終了すると削除されます。

## **状態遷移イメージ図**
```Text
              Enter
opacity: 0; ==========> opacity: 1;
    |                       |
  v-enter               v-enter-to
|___________________________________|
                |
          v-enter-active
============================================
              Leave
opacity: 1; ==========> opacity: 0;
    |                       |
  v-leave               v-leave-to
|___________________________________|
                |
          v-leave-active
```

# **Modalウィンドウを作ってみる**

## **サンプルtemplate**

以下にモーダルウィンドウを実装したときにサンプルコードを残しておきます。
ところどころ略されているところは目をつむっていただき、イメージをつかんでいただけたらなと思います。

name="modal"とすることで、アニメーションの名前を決定しています。
また、tag="div"の部分で、<transition>タグを何として扱うかを決定しています。

```html
<template>
  <transition apper name="modal" tag="div">
    <div class="modal-overlay" @click.self="closeModal">
      <div class="message-box">
        <header class="message-box-header">
        </header>
        <section class="message-box-body">
        </section>
        <footer class="message-box-footer">
        </footer>
      </div>
    </div>
  </transition>
</template>
```

## **サンプルCSS**

```css
.modal-enter-active,
.modal-leave-active {
  transition: opacity 1.39s;
  .message-box {
    transition: opacity .39s, transform .6s
  }
}
.modal-enter, .modal-leave-to {
  opacity: 0;
  .message-box {
    opacity: 0;
    transform: translateY(-39px);
  }
}
```

## **おまけ**

蛇足ですが、フェードインのアニメーションも記述しておきます。
今回取り上げたのは1つのプロパティに対するアニメーションでしたが、複数のプロパティに対してアニメーションを当てると面白いデザインのものができるので、調べてみると良いかもしれません。

```css
.fade-in-enter-active,
.fade-in-leave-active {
  transition: all 2s ease;
  opacity: 1;
}
.fade-in-enter,
.fade-in-leave-to {
  opacity: 0;
}
```

Vueでアニメーションを実装


# **VuexのTypeScript化**

## **ディレクトリ構成**
state, actions, getters, mutationsをモジュール化したVuexをTypeScript化したので、備忘録として記録します。
※node_module/vuex/types/index.d.tsに型定義が書いてある

```Text
src―――store
       |―store.ts
       |―types.ts
       |
       |―redux
          |―index.ts
          |―actions.ts
          |―getters.ts
          |―mutations.ts
          |―types.ts
```

## **store.ts**

```ts
import Vue from 'vue'
import Vuex, { StoreOptions } from 'vuex'
import { RootState } from './types'
import { Redux } from './redux/index'

Vue.use(Vuex)

const store: StoreOptions<RootState> = ({
  state: {
    version: '1.0'
  },
  modules: {
    Redux
  }
})

export default new Vuex.Store<RootState>(store);
```

### **vuex/types/index.d.ts**

```ts
export interface StoreOptions<S> {
  state?: S | (() => S);
  getters?: GetterTree<S, S>;
  actions?: ActionTree<S, S>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<S>;
  plugins?: Plugin<S>[];
  strict?: boolean;
  devtools?: boolean;
}
```

## **types.ts**

```ts
export interface RootState {
  version: string,
}
```

## **redux/index.ts**

```ts
import { Module } from 'vuex'
import { getters } from './getters'
import { actions } from './actions'
import { mutations } from './mutations'
import { RootState } from '../types'
import { ReduxState } from './types'

export const state: ReduxState = {
  loading: false, /* sample code for loading */
}

const namespaced = true

export const Redux: Module<ReduxState, RootState> = {
  namespaced,
  state,
  getters,
  actions,
  mutations,
}
```

### **vuex/types/index.d.ts**

```ts
export interface Module<S, R> {
  namespaced?: boolean;
  state?: S | (() => S);
  getters?: GetterTree<S, R>;
  actions?: ActionTree<S, R>;
  mutations?: MutationTree<S>;
  modules?: ModuleTree<R>;
}
```

## **redux/types.ts**

```ts
export interface ReduxState {
  loading: boolean,  /* sample code for loading */
}
```

## **redux/actions.ts**

```ts
import { ActionTree } from 'vuex'
import { RootState } from '../types'
import { ReduxState, } from './types'

export const actions: ActionTree<ReduxState, RootState> = {
}
```

### **vuex/types/index.d.ts**

```ts
export interface ActionTree<S, R> {
  [key: string]: Action<S, R>;
}
```

## **redux/getters.ts**

```ts
import { GetterTree } from 'vuex'
import { RootState } from '../types'
import { ReduxState } from './types'

export const getters: GetterTree<ReduxState, RootState> = {
}
```

### **vuex/types/index.d.ts**

```ts
export interface GetterTree<S, R> {
  [key: string]: Getter<S, R>;
}
```

## **redux/mutations.ts**

```ts
import { MutationTree } from 'vuex'
import { ReduxState } from './types'

export const mutations: MutationTree<ReduxState> = {
  /* sample code for loading */
  setLoading(state, payload: boolean) {
    state.loading = payload
  }
}
```

### **vuex/types/index.d.ts**

```ts
export interface MutationTree<S> {
  [key: string]: Mutation<S>;
}
```

### **Componentでの使い方**
'モジュール名/getter関数' を指定して呼び出す
```ts
this.$store.getters['Redux/getLoading']
```

> 参考ページ : <https://codeburst.io/vuex-and-typescript-3427ba78cfa8>  
> 参考ページ : <https://qiita.com/yam0918/items/68d4d6c74b06d589a195>

VuexのTypeScript化


# **C#メモ 基礎の基礎**

## **C#に関連する知識まとめ**

C#について調べたことを忘れないようにメモしたページです。
不定期(←ここ大事)で更新していくつもりです

## **ヘッダーファイル(.h/.hpp)が存在しない**

C#のソースファイルにはC/C++のようにヘッダーファイルは存在していないようです。
なので、外部ファイルの関数などを使用したいときに「#include *.h」のようにincludeするのではなく、代わりに名前空間namespaceで色々とやりとりをしているようです。

例) using
```C#
using System;
```

## **プロパティ**

クラスの持つメンバ変数をpublicにするのは好ましくないため、カプセル化をすることが基本です。
そうなるとクラスが持つ変数にどうやってアクセスするかの問題が発生しますが、解決方法の1つとしては変数の値をreturnするようなpublicな関数を用意してあげることと、今回のテーマであるプロパティを使用することの2つになります。

```C#
public class Player
{
  string name;
  int HP;
  int MP;
  int ATK;

  // プロパティ
  public string Name {
    get { return this.name; }
    set { this.name = value; }
  }

  // func
  public string getName {
    return this.name;
  }
}

// ** main ****** 使う側
Player player = new Player("Sample1");
Debug.log(player.Name); // Sample1
player.Name = "Sample2";
Debug.log(player.Name); // Sample2
```


C#の基礎についてメモ


# **Python 制御関連メモ**

## **制御に関連するメソッドや知識まとめ**

Pythonのif文など制御に関わることで調べたものを忘れないようにメモとして残しておくぺーじです。不定期(←ここ大事)で更新予定です。

## **if文制御の基本的な形**

```python
if 条件:
    処理内容
elif 条件:
    処理内容
else:
    処理内容
```
## **論理式**

- ==  : 同値だったら
- !=  : 同値でなかったら
- and : かつ条件(= &&)
- or  : or条件(= ||)

## **in / not**
```python
x = [1, 2, 3]
if x in 2: // xに2があるならTrue
if x not in 3 // xに3がないならTrue
```

## **not ? それとも != ?**

以下二つのサンプルコードは同じ処理をしているが、可読性を考えると下の!=を使う方が良いです。

```python
if not a == b
if a != b
```

## **notはどんなタイミングで使う?**

notを使うタイミングはboolean型の変数でif分岐をするときに使うことが多いです。

```python
if not boolean
```

## **Noneについて**

他の言語で見かけるNULLに相当するものが、pythonではNoneというもので存在している。
Noneでif分岐をするときは論理式を用いるのではなく、上記で登場したnotを用いることがほとんどのようです。

isは完全一致"==="のようなイメージになります。

```python
if 変数 is None
if 変数 is not None
```

## **while文制御**

以下のサンプルコードはカウントを出力してcount=5になったタイミングでループを抜け、"done"と出力し終了する単純なものですが、while文の中にあるelse分岐は途中でループがbreakして抜けだしたりしない場合に処理が行われるもので、2,3行目のコメントアウトが存在していなかった場合は0,1と出力したら、その後"done"を出力することなく、プログラムが修了します。

```python
count = 0
while count < 5:
    # if count == 2:
    #     break
    print(count)
    count += 1
else:
    print('done')
```

## **input関数:入力を受け付けるやつ**

input関数はユーザーに入力を促すもので、今回のサンプルコードの場合、okの入力を受け付けたらbreak文が走り無限ループを抜け出す。

```python
while True:
    word = input('Enter')
    if word == 'ok':
        break
    print('next')
```

## **for文を回す方法のアレコレ**

for文処理のいろいろな書き方

例)リストを回すとき
```python
list = [1, 2, 3, 4, 5]
for i in list:
    print('list item', i)
```

例)指定回数回したいとき
```python 
// 10回回す
for i in range(10):
    print(i) // 0,1,2,...9
// 2から9まで回す
for i in range(2,10):
    print(i) // 2,3,4,...9
// 2から3つ飛ばしで9までの範囲内で回す
for i in range(2,10,3):
    print(i) // 2,5,8
```

例)10回回したいが、indexの使用予定がないとき
```python
for _ in range(10):
```

- listのindexも知りたいとき
```python
for i, v in enumrate(['apple', 'orange', ...]):
    print(i, v) // 0 apple, 1 orange, ...
```

- listはまとめてfor文で回せる
```python
days = ['Mon', 'Tue', 'Wed',...]
fruits = ['Apple', 'Orange', 'Lemon',...]
drinks = ['Coffee', 'Juice', 'Tea',...]

// 以下のように実装もできるが...
for i in rage(len(dats)):
    print(days[i],fruits[i], drinks[i])

// zipを使ってまとめられる
for day, fruit, drink in zip(days, fruits, drinks):
    print(day, fruit, drink)
```



Pythonの制御文


# **Python 関数**

## **関数に関連する知識まとめ**

※殴り書きメモになっています...

## **関数内容の説明文記述について**
```python
def func(param1, param2):
    """Example Function

    Args:
        param1 (int) : ~~
        param2 (str) : ~~
    
    Returns:
        bool : 
    """

print(func.__doc__) // でdocumentが見れる

Python以外の言語は関数の上などに記述するかと思うが、Pythonは中に書く
```

## **引数はdefault値を設定できる**
```python
def order(entree, drink, dessert):
def order(entree='', drink='', dessert=''): // 空白がdefault
    print('entree is ', entree)
    print('drink is ', drink)
    print('dessert is ', dessert)

order(entree=beef, dessert='ice', drink='coffee')
```
## **参照渡しの変数はdefaultにすべきでない**
```python
def test(x,li=[]):
    li.append(x)
    return li

r = test(100)
print(r) // [100]
r = test(200)
print(r) // [100,200] // リスト型は参照渡しなので、前回の100が残ってしまっている
```

## **参照渡しをdefault引数に使いたい場合は**
Noneを使って、if文条件でやることを変える
```python
def test(x, li=None)
    if li is None:
        li = []
    li.append(x)
    return li
```

## **引数がたくさんあるときの便利なやり方**
大量の引数があるときに関数定義にいちいち記述するのが大変
写し間違えでバグにつながる
```python
def many(x,y,z,a,b,c):
は
def many(*args): // *args = (x,y,z,a,b,c)
で書ける
def many(x, *args):
上記のように書くとxのみ変数で取って、以降はtuple型で受け取ってくれる
```

## **オブジェクトもスプレッド構文ぽく受け取ったりできる**
```python
関数内では**kwargsで再度パッキングして辞書型にし、.items()でリスト化して出力している
def menu(**kwargs): // 
    if k, v in kwargs.items() // kwargs = (['x':'X'], ['y': 'Y'],...)
        print(k, v)

dict = {
  'x': 'X',
  'y': 'Y',
  'z': 'Z'
}

menu(**dict) **でdictを開いて x='X', y='Y', z='Z'を引数で渡している感じ
```

## **インナー関数(ラムダ式みたいな感じ?)**
関数内の中でしか使わない関数については中に書いてしまって良い
```python
def ...:
    def ...:
```

## **クロージャ―とは**
```python
def outer(a, b)
    def inner():
        return a + b
    return inner

f = outer(1,2)
// outerの戻りが関数オブジェクトなので、ここでようやく発火する
r = f() // 3

※具体的な使いどころ
def calc_circle_area(pi):
    def circle_area(radius):
        radius * radius * pi
    return circle_area

ca1 = calc_circle_area(3.14)
ca2 = calc_circle_area(3.1415926)
```

## **デコレーターとは**
処理の前後に何かしたいときに使う  
```python
def print_info(func):
    def wrapper(*args, **kwargs):
        print('start')
        result = func(*args, **kwargs)
        print('end')
        return result
    return wrapper

def add_num(a,b):
    return a + b

f = print_info(add_num)
r = f(1,2) // start end 3
```

## **デコレーター実際の使い方**
```python
@print_info
def add_num(a,b):
    return a + b

r = add_num(1,2)
```

## **lamdaで1行で処理を書く**
```python
cpt = lamda word: word.capitalize()
print(cpt("hello")) // Hello
```

### **ジェネレーターとは**
yieldを境に少しずつ実行していく  
重い処理があったりするが、それを一気に行うのではなく、小出しで少しずつ進めていきたいとき
```python
def greeting():
    yield 'good morning'
    yield 'good afternoon'
    yield 'good night'

g = greeting()

print(next(g)) // good morning
print(next(g)) // good afternoon
print(next(g)) // good night
```

## **リスト内包表記**
リストのみではなく、辞書型や集合型もできる
```python
t = (1,2,3,4)
r = []
for i in t
    // tuple型の中身をリストに詰めていく処理は...
    r.append(i)

r = [i for i in t] // for文でなく、左記のように書ける

// 条件もつけられる
r = [i for i in t if i % 2 == 0]

// for文を2重に内包させたりも可能だが、可読性が落ちるので原則1つのみ(条件と合わせて2個くらいまで)

k = [] y = []
d = {x: y for x, y in zip(k,v)}

s = {i for i in range(10) if i % 2 == 0}
```

## **try catch**
```python
l = [1,2,3]
i = 5

try:
    l[i]
// エラーがおきたらexceptの方に行く
except:
    print('error')

// 何のエラーだったら検出するかの指定もできる
// reasonでエラー内容を出力できる
except IndexError as reason
    print('error', .format(reason))
```


Python 関数


# **Python 辞書型**

## **辞書型に関連するメソッドや知識まとめ**

殴り書きのメモ状態です...

### **辞書型はObjectみたいなもの**
```python
dict = {'x': 10, 'y': 20}
```
### **keyやvalueを一覧で取得する**
```python
dict = {'x': 10, 'y': 20}
dict.keys() // dict_keys(['x', 'y'])
dict.values() // dict_values([10, 20])
```

### **辞書型は合体だったり中身を取得、削除したりできる**
```python
dict = {'x': 10, 'y': 20}
dict2 = {'x': 30, 'z': 100}
// update()で同じKeyは上書き、違うものは挿入
dict.update(dict2) // {'x': 30, 'y': 20, 'z': 100}
// get(key)でValueの取得
dict.get('x') // 30
// pop(key)で要素の削除
dict.pop('x') // 30, dict = {'y': 20, 'z': 100}
```

### **辞書型の中身をチェックできる**
```python
dict = {'x': 10, 'y': 20}
'y' in dict // True
```

### **辞書型もリスト型と同じで参照渡しでコピーするので、値渡しにしたい場合はcopy()を使う**

List型のところに具体例があります。


### **中身をリストアップできる**

```python
dict = {'x': 10, 'y': 20}

print(dict.items()) // dict_items([('x', 10), ('y', 20)])
```

Python 辞書型


# **Python 集合型**

## **集合型に関連するメソッドや知識まとめ**

殴り書きメモとなっております...

### **集合型はユニークな配列みたいな感じ**
```python
enum = {1, 2, 3, 3, 3, 4, 4, 5}
// 同じ値は消えてなくなるため、出力すると以下のようになる
enum // {1, 2, 3, 4, 5}
```
### **集合型の引き算や論理和**
```python
enum2 = {2, 3}
enum - enum2 // {1, 4, 5}
enum & enum2 // {2, 3}
enum | enum2 // {1, 2, 3, 4, 5}
enum ^ enum2 // {1, 4, 5}
```

### **集合型には順番の概念がないため添え字による取得はできない**
```python
enm = {1, 2, 3, 4, 5}
enm.add(6) // {1, 2, 3, 4, 5, 6}
enm.remove(3) // {1, 2, 4, 5, 6}
enm.clear() // set()
```

### **集合型がどんな場面で使うか**

ユニークなものしか残らない性質を利用して、配列を集合体にキャストしてユニークなものを取り出したりする


Python 集合型


# **Python 文字列型**
## **文字列に関連するメソッドや知識まとめ**

※このページは殴り書きメモとなっています。。。

## **デバッグログに使えそうな便利なPrint**
```python
a = 'a'
print(f'a is {a}')  // a is a
 
x, y, z = 1, 2, 3
print(f'a is {x}, {y}, {z}')  // a is 1, 2, 3
print(f'a is {z}, {y}, {x}')  // a is 3, 2, 1
 
name = 'Miku'
family = 'Hatsune'
print(f'My name is {name} {family}. In Japan {family} {name}')
// My name is Miku Hatsune. In Japan Hatsune Miku
```

## **printの出力方法や文字列についていろいろ**

### **スペースを空ければ反映される**

```python
print('Hi', 'Python') // Hi Python
```

### **sepで記述したもので、繋いでくれる**

```python
print('Hi', 'Python', sep=',') // Hi,Python
```

### **endで終端を指定できる、下記例だと改行して終わる**

```python
print('Hi', 'Python', sep=',', end='\n') // Hi,Python
```

### **rを先頭につけることで特殊文字を認識しないで扱える**

```python
print(r'C:\name\name')  // C:\name\name
```

### **改行コードなしで改行できる、見た目通りの出力が可能**

\を入れているのは###とLine1の間に空白が出来てしまうのを消すため

```python
print(######)
print("""\
Line1
Line2\
""")
```

### **文字の連結**

```python
long_str = ('longlonglonglonglonglong'
            'temptemptemptemptemptemp')
// longlonglonglonglonglongtemptemptemptemptemptemp
```

### **string型は添字指定で見れる**

```python
word = 'python'
print(word[2])   // t
print(word[-1])  // n
print(word[0:2]) // py
print(word[:2])  // py
print(word[4:])  // on
```

### **文字列の一部を変えるときは？**

```python
word = 'python'
wordに対して、word[0] = 't'と添字指定でtythonにすることは"出来ない"
word = 't' + word[1:] こうすることで、tythonに変更可能
```

### **文字列の長さを知る**

```python
word = 'python'
print(len(word)) // 6
```

### **文字列始まりを検査する**

```python
word = 'python is programming lang'
print(word.startswitch('python')) // True
```

### **文字列がどこにあるか検索する**

```python
word = 'Hello World , Hello Python'
print(word.find('Hello')) // 0

// 後ろから検索する
print(word.rfind('Hello')) // 14
```

### **文字列があるか確認**

```python
word = 'Hello World , Hello Python'
print(word.count('Python'))  // 1
```

### **文字列の頭文字だけを大文字にする**

```python
word = 'Hello World , Hello Python'
print(word.capitalize()) // Hello world , hello python
```

### **文字列の単語の頭文字を大文字にしてくれる**

```python
word = 'Hello world , hello python'
print(word.title())  // Hello World , Hello Python
```

### **文字列をすべて大文字にする、小文字にする**

```python
word = 'Hello world , hello python'
print(word.upper())  // HELLO WORLD , HELLO PYTHON
print(word.lower())  // hello world , hello python
```

### **文字列の置換**

```python
word = 'Hello world , hello python'
print(word.replace('python', 'NextJs'))  // Hello world , hello NextJs
```

Python 文字列型


# ***Python殴り書きメモ***

## **PythonAutoGUIで " @ ", " ^ ", " : " を使える用にする**

修正ファイル : 
C:\Python310\Lib\site-packages\pyautogui\_pyautogui_win.py

修正前)
```python
needsShift = pyautogui.isShiftCharacter(key)
```
修正後)
```python
needsShift = pyautogui.isShiftCharacter(key)
if key == '@': needsShift = False
if key == '^': needsShift = False
if key == ':': needsShift = False
```

## **Pythonのprintについて豆知識**

### **変数の型を知ることができる**

```python
type(XXX)のように記述する
print(num, type(num)) // 1 <class 'int'>
print(lang, type(lang)) // Python <class 'str'>
print(is_ok, type(is_ok)) // True <class 'bool'>
```

## **Pythonの計算あれこれ**

```python
17 / 3 
>> 5.66666666667

17 // 3
>> 5

5 * 5 * 5
>> 125

5 ** 3
>> 125
```


Python殴り書きメモ


# **CSS Library**

## **CSS/SCSS/SASSの違い**

CSSを拡張して便利にしたり、メンテナンスがしやすいようにしたものが、SCSSとSASSです。

SCSSとSASSではスタイルの記述を入れ子形式にすることができます。
そのため、波括弧分のStep数が減らせるというメリットがあります。

SCSSとSASSの違いは書式の違いにあり、SASSはインデントを主としている記法となっているため、波括弧でスタイルを囲う必要はなくなり、またセミコロンで最後を閉じる必要がなくなっています。

## **CSSでは出来ない様々なこと一例**

### **1.変数の利用**

```scss
$var-css:red
h1
  color:$var-css
```
### **2.mixin 関数みたいなやつ**

```scss
@mixin func($color: #fff, $f-size: normal)
  color: $color
  font-size: $f-size
.cont-btn
  @include func(red, 20px)
```
※@mixinはSASSでは=で省略可能

### **3.inheritance 継承**

```scss
%css-share
  font-family: "Comic Sans MS"
  color: #fdeeef
.nav-text
  @extend %css-share
  font-size: 1em
```
参考サイト : <https://www.fenet.jp/dotnet/column/language/html-css/5245/>

## **最強なサイトたち**

公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/CSS>

デザインアイディア帳 : <https://coco-factory.jp/ugokuweb/>

Sass/Scss/CSS


# **NextJsの動的ルーティング**

## **Routerについて**

Reactだとページ遷移をするためのRouterはDOMを用意して行わないといけなかったが、
NextJsはデフォルトでpagesディレクトリが用意されており、配下にファイルを置くことでそのファイルまでのpathがそのままURLとなり、
明示的にルーティング設定を記述する必要がなくなり、とても便利になっています。

公式リファレンス : <https://nextjs.org/docs/api-reference/next/router>

## **Link**

Linkをimportして、pathを指定してあげることで呼び出せます
```javascript
import Link from 'next/link' ...
<Link href="/">ルートディレクトリに移動</Link>
```
公式リファレンス : <https://nextjs.org/docs/api-reference/next/link>

## **Linkタグとaタグの違いは？**

リロードが入るか入らないかの違いがあります。
なので、基本的にはLinkタグを用います。

NextJsの動的ルーティング


# **jQueryとは**

## **jQueryとは**

jQueryとはプログラム言語であるJavaScriptを基に作成されたWebサイト製作に便利なツールで、JavaScriptのライブラリです。

## **3つの特徴**

- 1.HTMLやCSSを簡単に操作できる。
- 2.どんなブラウザでも使用できる。
- 3.プラグインで拡張できる。

### **1.HTMLやCSSを簡単に操作できる。**

スクロールをすると画像がフェードインして来たり、カーソルを当てると説明が浮かんでくる。といったアニメーションが簡単に製作可能になります。

### **2.どんなブラウザでも使用できる。**

Edge,InternetExplore,Google Chrome,Safari,Firefox、ブラウザに合わせて動きを変えて対応してくれるため、開発者は実行環境のことを気にせずに実装ができるようになります。

### **3.プラグインで拡張できる。**

jQuery UIでダイアログ、ウィジェット、アニメーションが簡単に作れるようになります。

## **jQueryとJavaScriptの違い**

- 1.プログラムの書き方。
- 2.クロスブラウザ対応。
- 3.実行速度の違い。

### **1.プログラムの書き方。**

JavaScriptは書き方が複数あるため、1つのアニメーションを書くにしても人それぞれ方法が異なり、開発者の数だけ書き方が存在します。

しかしjQueryはHTMLの要素と実行したい処理を書式 「$('セレクタ').メソッド(引数); 」の形で書くことで統一されているため、メンテナンスが容易になっています。

### **2.クロスブラウザ対応。**

JavaScriptはブラウザによって動きが変わるため、動作確認をする必要があります。
が、jQueryは複数ブラウザに対して動作保証があらかじめされているため、気にせずコーディングが可能となっています。

### **3.実行速度の違い。**

jQueryは複数ブラウザ対応やコードの書きやすさ重視のため、実行速度が"やや遅い"ので、速度重視のサイトには不向きというデメリットが存在します。

## **jQueryの使用方法**

- 1.ダウンロードする。
- 2.CDNを使用する。

### **1.ダウンロードする。**

公式サイトからダウンロード  
> <https://jquery.com/download/>

### **2.CDNを使用する。**
```html
//jQueryのCDN
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
//GoogleのCDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min."></script>
 
//MicrosoftのCDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
```

jQueryとは


# **JavaScript Library**  

## **Array.prototype.fill()**

```javascript
配列の最初から最後の要素まで値を詰める
Array(3).fill(null)のように書くと、配列の全要素をnullで初期化している
Array(9).fill(3,3,9)、引数を3つ持てて「第1引数の値で、配列の第2引数位置から第3引数位置までセットする」
```
公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/fill>

## **Array.prototype.slice()**
```javascript
配列の一部をコピーすることができる
Array.slice()すべての配列要素を返す
Array.slice(3)3つ目の要素から後ろすべてを返す
Array.slice(3,9)3つ目の要素から8つ目の要素までを返す
　※Array.slice(start,end):startの要素を含むが、end部分は返さず、直前まで返す
```
公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice>

## **Array.prototype.push()**
```javascript
配列の末尾に要素を追加することができる、戻り値で要素数を返す
var Array = ['a', 'b']
Array.push('c')
console.log(Array) // Array['a', 'b', 'c']
```
公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/push>

## **Array.prototype.concat()**
```javascript
配列の末尾に要素を連結することができる、戻り値は新しい配列
var Array = ['a', 'b']
var newArray = Array.concat['c', 'd']
console.log(Array) // Array['a', 'b']
console.log(newArray) // newArray['a', 'b', 'c', 'd']
```
公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat>

## **Array.prototype.map()**
```javascript
与えられた関数をすべての配列要素に適応して新しい配列を戻り値として返す
var Array = [1, 2, 3]
var newArray = Array.map((x, y) => 処理内容);
xは今処理しようとしている要素
yはそのインデックス
```
公式リファレンス : <https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map>