概要

目的

  • TypeScript の練習。Web でよく利用される処理を実装し「汎用パーツ」にまとめる。
  • Pug・SCSS の練習とデザインの勉強。色々な Web ページでいいなと思ったコンポーネントをトレースして一覧できるようにする。

作業方法

  • 画像はフリーのプレースホルダー画像に差し替える
  • そのままトレースするのでなく、効率的な書き方ができないか試す。また、クラス名・SCSS 変数も自分で考える
  • 参考にした Web ページは各コンポーネントの「Notes」タブに記載

各コンポーネントについて

ページ下部のタブを切り替ることで、以下の情報を確認できます。

  • HTML
    ⇒View と Context を元に出力された HTML
  • View
    ⇒Pug を利用した View
  • Context
    ⇒Pug に渡すデータ(※ページによってはデータがない場合もあります)
  • Assets
    ⇒ 関連する TypeScript、SCSS ファイル(※セレクトボックスで表示ファイルを切り替えできます)
  • Note
    ⇒ コンポーネントについての説明や参考にしたサイト情報

GitHub URL

https://github.com/zakzakst/parts