【Typescript】型ガードについて

型ガード(Type guard)について

if分やcase文を始めたとした条件分岐で変数の方を判別し、ブロック内の変数の型を絞り込む機能のこと。
型を変数内で明示して変換する「キャスト」を使用することを防げる。

type of

変数の型をチェックできます。

type You = string
const you: You = "kotaro";

console.log(typeof You) 
// string

型がstringとnumberの合併型の場合は、stringにしか使えないメソッドを使うとエラーになる

type NumOrStr = number|string ;

function useSomeNumOrStr (arg:NumOrStr): NumOrStr {
  const toUpperCaseStr = arg.toUpperCase()
  return toUpperCaseStr
} 

//Property 'toUpperCase' does not exist on type 'NumOrStr'.
//Property 'toUpperCase' does not exist on type 'number'.

typeof の結果を条件分岐してあげることでエラーを回避できる

type NumOrStr = number|string ;

function useSomeNumOrStr (arg:NumOrStr): NumOrStr {
  if (typeof arg === "string") {
    const toUpperCaseStr = arg.toUpperCase()
    return toUpperCaseStr
  }
  return arg
} 

【Typescript】オブジェクトのキーの文字列のみを許容する動的な型宣言

オブジェクトのキーをオブジェクトの型のプロパティーとしてそのまま流用したい場合。

まず、オブジェクトの型を定義したい場合

type Panda = {
  age: number
}

const panda: Panda = {
 age: 11,
}
//型通り

そのオブジェクトのキーをage, name, color, dream のいずれかにしたい場合

type Panda =  {[K in 'age'|'name'|'color'|'dream']: string}

const panda: Panda = {age: "fifty five" ,name: "Eric Clapton",color: "red", dream: "change the world"}

インターフェースのオブジェクトのキーを次の型のプロパティーにする

type Panda = {
 age: number;
 name: string;
 dream: string;
}

type Pandaaaa = {[K in keyof Panda]: string}
// Panda型のキーがPandaaaaのプロパティーとして使える

上記のように、オブジェクトのキーも特定の文字だけしか入らないようにすることが可能。
特に [K in keyof Object]と記述し、オブジェクトのプロパティを指定したり、
[K in 'A'|'B'|'C']と記述し、特定のキーを直書きすることができる。

【Typescript】extendsを用いてジェネリクスの型パラメータに制約をつける

ジェネリクスで型定義をする際に、特定のプロパティーを持たせるように制限することができる。

引数に存在しないプロパティーがある場合

function showBirthday<T>(person: T): Date {
  
  const birthDay = person.getBirthDay();
  // personの型は未知なのでgetBirthDay()メソッドがあるかどうか未定でエラーになる
  return birthDay;
}

//error : Property 'getBirthDay' does not exist on type 'T'.
//TにgetBirthDayなんてプロパティーは存在しません！！  

extendを利用して型推論時に「引数に特定のプロパティーが存在する」ように制約をつける

type Person = {
    getBirthDay(): Date;
}

function showBirthDay<T extends Person>(person: T): Date {
    const birthDay = person.getBirthDay();
    return birthDay
}

// ok !!

参考：
ジェネリクス — 仕事ですぐに使えるTypeScript ドキュメント

【Typescript】ジェネリクスについて

function test<T>(arg: T): T {

上記のHTMLタグのような表記のことをジェネリクスと言います。

ジェネリクスとは

Genericsは抽象的な型引数を使用して、実際に利用されるまで型が確定しないクラス、関数、インターフェイス、を実現するために用います。

具体的に

①javascriptとある関数

function test(arg){
  return arg;
}

②型を追加

function test(arg: string): string {
  return arg;
}

③ジェネリクスを追加して呼び出し時点で型を確定させる。

function test<T>(arg: T): T {
  return arg;
}

//呼び出し時に型を決定
test<string>("aaaaaaa")

インプットが全然追いつかないぜ！

日記です。

お久しぶりです。三ヶ月ぶりかな。

初めての転職が無事に終わりました。
前職とはまた違ったアウトプットを求められる職場で、毎日楽しいです。

職場の皆さんから多くのことを吸収する一方で、振り返る時間がなかなか取れず、
それでいて昔のように学んだことをまとめるような時間も取れなさそうなので.
今日からちょこちょこ日記のような形で呟いていこうと思います。

リハビリですね。

開発までの準備に色々時間がかかる件

最近はコンポーネント設計なるものを学びました。
「学んだ」と言うのは語弊がありますが、頭ごなしに実装する中で徐々に
実装前に理解しなきゃならない部分があるなと言うことに気づき
細かくコンポーネントの命名、利用する定数、それぞれのコンポーネントがどのディレクトリにあるべきか
を意識するようになりました。

そこで出てきたのがクリーンアーキテクチャ
the best of 珍紛漢紛です

qiita.com

今でも意味わかってないですが、 一言で言うと「それぞれのコンポーネントがもつべき責務ごとに分類する設計」のことだと解釈してます。

記事読みながら掻い摘んで説明しようとしたが、ちょっとわからなくなったのでストップ笑

なんにせよ、これまでSSRとJavascirptベタがきしか知らなかった自分としては知らない世界すぎて
「うわぁああ」な毎日です。

ちょっとずつタスクの準備ができるようになった今日

さて、殴り書きは続きます。

そしてちょっとずつフロントのタスクを進めながら
ちょっとずつ開発準備にもっと時間をかけるべきだと言うことがわかってきました。

今週から意識していることはどんなに小さなタスクでも、細かく洗い出して質問できる粒度に持っていくこと。
質問できるのであればある程度理解が進んでいることにもなりますからね。
はい、それくらい粒度の大きい状態で開発に臨んでいたので、、笑　今週やっと気づきました。

### そして今日

今日は露出（バナー）系のコンポーネント設計を進めました。 　 それぞれが持つべき定数やコンポーネントの命名などが完了。

明日はコンポーネントの呼び出す場所の洗い出し、バナーを消すばつボタンのキャッシュ操作に
最適なツールの調査を進めたいと思います。
頑張るぞ

【contentful】content field をマークダウン形式に設定する

contentful field というのは、contentful で利用されている入力項目の種類のことです。

こちらでマークダウン形式で入力できるようにフィールドを追加していきます。

手順

1 Add field ボタンでフィールドを追加

2 フィールドの種類は「text」を選択
(「Rich Text」ではないので注意。 )

3 「Long text」を選択して create and configure を選択

4 「Appearance」でフィールドの形式を Markdown に変更

以上

割とすぐ設定できたのでよかった＾＾

【vercel】【Next.js】vercelを使ってのデプロイ方法

vercelでのデプロイがうまくいかなかったので
最初から作りました。手順メモ。

特に難しくはないのですがポイントが二つあります。
* Create Team は skip すること
* .env.localで設定した環境変数を設定すること

方法

・vercelにアクセスし、下記画像からCreate New Projectを選択。

・デプロイするリポジトリを選択してimport

・Create Team の設定は Skip を選択 (チームは有料機能なので、
14日間のお試し期間終了後に無料プランで再度デプロイし直すことに、、)

・Environment variables を設定する ここは.env.local で設定した変数を2点入力します。
NAMEにキー、VALUEに値を入力します。

//.env.local
NEXT_PUBLIC_CONTENTFUL_SPACE_ID=xxxxxxxx
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

・設定完了です。
(スクショが微妙な感じに、、)

以上になります。

5分もかからないでデプロイできるってすごい!!