kikiki-kikiのブックマーク - はてなブックマーク

styled-components の :&>before(記号) まとめ

styled-components の入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS

kikiki-kiki 2022/06/23

リンク

API仕様書をバリデーターと型と同期させて作る

API Spec を書くとそれ通りのリクエストしか受け付けないようにバリデーションしてくれて、なおかつバリデーションされた値には Spec で期待した通りの型が付いて欲しいですよね。これを TypeScript で実現しようとすると色々と壁があります。特に API Spec と TypeScript の型を揃えるのが難しいです。この手の課題は NestJS であればクラスフィールドとデコレータを使って解決できるのですが、制約の強い FW であるため会社の事情で採用が難しかったりもします。そこで fastify を使って同様のことを達成できるか模索してみましょう。 (※ OGP は https://www.pakutaso.com/photo/75600.html です。型、バリデータ、API Spec 三銃士感があって選びました) API 仕様書はどうあるべきかまず、フロントエンドエ

kikiki-kiki 2022/02/21

リンク

Storybook First な開発のススメ

Storybook first な開発とは Storybook での呼び出され方を意識しながらアプリケーションコードを書くことをそのように呼んでいます。道具に設計がひきづられるのはアンチパターンと言われそうな気もするのですが、コンポーネントのカタログを整備していくことは、コンポーネントが良い感じに再利用可能な形で分離できるということでもあり、やっていくとむしろ正道に近づいていくと思います。 Storybook First のコンポーネント設計や型定義をすると、パーツに限らず Storybook でカバーできる範囲が広がり、ページそのもののサンドボックスを作れます。そして API がない状態でもデータを使って開発ができたり、特定のスナップショットの再現やタイムトラベルに近いことも可能になるというメリットがあります。つまり、ただのコンポーネントカタログとしてではなく、開発のためのサンドボ

kikiki-kiki 2021/03/08

リンク

Reactのコンポーネント周りの用語を整理する

React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReact HTMLElement DOMElement FunctionComponent Component ReactNode

kikiki-kiki 2020/12/23

react.js

リンク

Preactの環境構築 of 2020

所用で先週preactを初めて触っていたのですが、環境構築をしているときに「この情報ドキュメントにないよね？」「情報が間違ってそう？」っていうのを節々で感じた部分があって難航したので、これから環境構築する人がググった時の助けになるようメモを残しておきます。とはいえ自分が preact 初心者で自分が間違っている可能性も大いにあるので、そういうのがありましたら指摘していただけると助かります。 React をある程度書いたことある人が preact に挑戦することを想定して書いています。主に「React でやるときのあれは preact でどうするんだっけ」という情報です。目指すゴール環境構築のゴールが何かというと一つには Hello World があるとは思いますが、それよりかはもっと踏み込んでアプリケーションとして欲しくなる機能をとりあえず全部実装していこうと思います。それが何か