union型とは
２つ以上の型定義を|(パイプ)で繋いで定義する方法。
function combine(input1:number | string, input2:number | string) {
const result = input1 + input2;
return result;
};
この場合input1,2が number型かstring型であることを定義している。
alias
型の定義をaliasとして別で定義して使いまわし出来るようにする。またコードの可読性を上げることもできる。
type Input = number | string;
function combine(input1:Input,input2:Input) {
const result = input1 + input 2;
return result;
};
全く同じ内容ではあるがtypeを使用してInputというaliasを作成して引数のinput1,2の型を明示している。
funcion型
関数の型定義。コールバック関数などの定義もできる。
function printResult(num:number): void {
console.log('Result: ' + num);
}
このような形で定義する。voidというのは何も返さないという意味でこの場合returnが無いためvoid型を定義する。
実際型推論が発生する為、明示的に記述する必要はない。
function addAndHandle(n1:number, n2:number, cb:(num:number) => void) {
const result = n1 + n2;
cb(result);
}
コールバック関数を定義する場合はこういった記述になる。この記述ではコールバック関数は引数としてnumber型を受け取り、returnが無いコールバック関数であることが見て取れる。
分割代入のおさらい
const person = {
name: 'taku',
age:28
};
const {name} = person ;
console.log(name) // taku
このようにしてオブジェクトの中身から取り出せる。
ネスト構造から取り出すには
type Product = {
id: string;
price: number;
tags: string[];
details: {
title: string;
description: string;
};
};
const product: Product = {
id: 'aaa111',
price: 10,
tags: ['good', 'bad'],
details: {
title: 'Red Carpet',
description: 'A great carpet - almost brand-new!',
},
};
const {
id,
tags: [first],
details: { title },
} = product;
console.log(id, first, title); // aaa111 good Red Carpet
このようにすることで取り出せる。オブジェクトから取り出すときはキーを指定、配列から取り出すときはインデックスを指定する。この場合[0]をfirstとして取り出している。
[1]を取り出したい場合は
[,second]とすると取り出せる。
TailwindCSSは自由度が高いため、それを活かすためのUIフレームワークという事でNextUIというモノを導入してみた。
導入方法
yarn add @nextui-org/react
この後App.tsx内でCssBaselineを呼び出す。
import { CssBaseline } from '@nextui-org/react';
const Application = () => (
<>
<CssBaseline /> // ---> Normalize styles
<AppComponent /> // ---> Your App Component
</>
);
これで完了。お手軽。
ヘッダー自体はこんな感じで実装しました。
const Header = () => {
return (
<Container
className='bg-teal-300 text-center text-2xl mb-2 py-1'
display='flex'
alignItems='center'
>
<Row>
<Col className=' '>
<HeaderContent link='/'>My Blog</HeaderContent>
</Col>
<Col className=''>
<HeaderContent link='/about'>about</HeaderContent>
</Col>
<Col className=''>
<HeaderContent link='https://zenn.dev/kimura141899'>
Zenn:MyPage
</HeaderContent>
</Col>
</Row>
</Container>
);
};NextUIの良い点
- 準備が簡単
- 決められたスタイリングが少ないのでtailwindCSSでのカスタマイズと衝突しづらい
シンプルさが特徴としてあげられる分、TailwindCSSでのカスタマイズが必要となってくるのでCSSの知識は必要になってくるなと。
他のコンポーネントもあるのでもう少し使い込んでいきたいと思います。
実装するうえでCSSのスタイリングをどこで当てるかを改めて考えるようになりました。行き当たりばったりのスタイリングだと後で修正しづらいし、最悪大幅な変更が必要になる場合も・・・
設計大事ですね。
今回はとても小さな事ですが、Header自体のスタイリングでテキストを中央寄せするのではなく、HeaderContentに細かく分割してそちらでテキストを中央寄せしてみました。実際はどうなのだろう？
ブログのコンテンツが増えると見づらくなってしまうと思っていたのでページネーション機能を追加。
microcmsでは一度に5MB以上の通信はエラーになってしまうとのこと。より一層ページネーションが必要。
https://blog.microcms.io/next-pagination/
こちらの公式を参考に実装。
こういった記事を掲載していただけるのでとてもありがたい。
苦労した点
実装前はsdkを使用してエンドポイントにアクセスしてコンテンツを取得していた。ページネーション実装にあたり、コンテンツの総数を取得する必要があるのだが、sdkを使用して取得する方法が分からず、記事を参考にfetchメソッドを使用して総数を取得した。
SSGなどについても理解していない部分忘れていた部分もあり、nextでの動的なページ生成についても苦労した部分はあった。