やったこと

フロントの最終課題とハッカソンの準備

display: inline-flexって何？？

Molecules/NewsAndEventsMoreにおいて、aタグの範囲がdisplay:flexにすると横全体になってしまう現象が起きた。
それを解決するのがdisplay: inline-flexであったが、なぜそれで解決されるのかわからなかった。
display: inline-flexとは、要素をインラインレベルのflexコンテナとして定義する
とあるがそのまますぎる。

display: inline-flexはdisplay: inline-boxの拡張版(flexの要素も持つ)
とあったが、改めてinline-boxの理解が甘い気がした

inline-block要素の特徴

• 横幅と高さが指定できる
• ブロック要素と同じ余白のつき方をする
• 横幅の初期値が内容で決まる
• 前後の要素と横に並ぶ

このうちの横幅の初期値が内容で決まるが今回のポイントだった。

どういう流れで開発していく？

まずは、必要になる色やfont-size, line-heightをそれぞれ定義する
client/src/style_varsにcssの定数を定義していく
client/src/style_vars/にcolor, font-family, font-size, line-heightを定義する

仮に、font-sizeの場合は、

const FONTSIZE = {
  H1: 48,
  H2: 40,
  H3: 32,
  XL: 25,
  L: 18,
  M: 16,
  S: 12,
  XS: 10,
  XXS: 8,
} as const;
type FONTSIZE = typeof FONTSIZE[keyof typeof FONTSIZE];
export default FONTSIZE;

このようにexportする

ここで気になったのが

• type FONTSIZE = typeof FONTSIZE[keyof typeof FONTSIZE];が何をしているのか
• as constとは

type FONTSIZE = typeof FONTSIZE[keyof typeof FONTSIZE];が何をしているのか

[Typescript] typeof “object value” [keyof typeof “object value”] の動作を丁寧に解説してみる
この１行は、

• オブジェクトの型を取得する typeof operator
• 型のプロパティ名のUnionTypeを表現する keyof operator
• ある型のプロパティの型を表現できるT[K] に分類することができる

1.オブジェクトの型を取得する typeof operator

typeof operatorを利用すると下記のように特定の値の型を取得することができる

let test1 = 'test1'
//↓は'string'に'number'を代入しているので、コンパイルエラーになる
let test2: typeof test1 = 2 

2. 型のプロパティ名のUnionTypeを表現する keyof operator

ある型Tのプロパティ名のUnionTypeを取得する演算子

interface Person {
  name: string;
  age: number;
  location: string;
}
type K1 = keyof Person; // "name" | "age" | "location"
type K2 = keyof Person[]; // "length" | "push" | "pop" | "concat" | ...

3. ある型のプロパティの型を表現できるT[K]

T[K]はindexed access types、またはlookup typesと呼ばれ、オブジェクトのプロパティにアクセスするような記法でプロパティの型を取得できる

interface Person {
  name: string;
  age: number;
  location: string;
}
type P1 = Person["name"] // string
type P2 = Person["name" | "age"] // string | number
type P3 = Person[keyof Person]// string | number

as constとは？？

constアサーション「as const」 (const assertion)
オブジェクトリテラルの末尾にas constを記述すればプロパティがreadonlyでリテラルタイプで指定した物と同等の扱いになる

readonlyとconst assertionの違い

• readonlyはプロパティごとにつけられる
  • as constは全てのプロパティが対象になる
  • const assertionはすべてのプロパティを固定する そして、定義した変数を

    import COLOR from "./properties/color";
    import FONTSIZE from "./properties/font-size";
    const SV = {
    COLOR: COLOR,
    FONTSIZE: FONTSIZE,
    };
    export default SV;
    export type TCOLOR = COLOR;
    export type TFONTSIZE = FONTSIZE;
    

    src/style_vars/index.tsでまとめてexportする
    すると使用する際には、

    import SV from "../../../style_vars";
    font-size: SV.FONTSIZE.X
    

    などのような記述をすることができる

Storybookを使用しながら部品を作っていく

Storybookを使いながら、React開発を進めていくには、コンポーネントと同階層にstories.tsxファイルを作る必要がある