Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

2023-04-01から1ヶ月間の記事一覧

React.memoで子コンポーネントの再描画を抑制する

関数コンポーネントの再描画とは 関数が実行されて、HTML文書構造をreturnすることで、対象のDOMが再描画されます。 関数コンポーネントが再描画(再実行)されるタイミング 以下のようなときに再描画(再実行)されます。 stateが変化した時 propsが変化した時 …

dockerを使ってOpenAPIのファイルからコードをgenerateする | openapitools/openapi-generator-cli

参照したページ CLI Installation | OpenAPI Generator ディレクトリ構造の例 この記事では、カレントディレクトリに local ディレクトリがある以下の構造を想定しています。 ./ └── local └── sample.yml sample.yml の記述内容は、OpenAPIのフォーマットに…

@radix-uiのコンポーネントにstyled-jsxでスタイル適用をしてみる

参照したページ Introduction – Radix UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @radix-ui を使ってみます。 スタイルを適用してみる 試しにSwitchコンポーネント( Switch – Radix UI )に…

@mui/baseのコンポーネントにstyled-jsxでスタイル適用をしてみる

参照したページ Overview - Base UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @mui/base を使ってみます。 2023年4月17日現在では、まだ @mui/base はalpha版しか無いようです。 そのまま使っ…

Reactで使えるUIライブラリについてちょっと調べる

参照したページ まとめ記事 UIライブラリの「機能」は欲しいけど「見た目」はカスタマイズしたいを叶えるRadix UI | microCMSブログ コンポーネントベース Primitives – Radix UI Overview - Base UI Headless UI - Unstyled, fully accessible UI component…

OpenAPI (Swagger) に少しだけ入門してmock dataを返すAPIサーバーを起動してみる

参照したページ API Documentation & Design Tools for Teams | Swagger Installation | Prism OpenAPI (Swagger) まとめ - Qiita OpenAPI仕様(Swagger仕様)とは swagger.ioの公式ドキュメント( https://swagger.io/docs/specification/about/ )には以下の記…

Next.js13の開発環境構築手順 step04 lint-stagedとhuskyを設定する

lint-stagedとhuskyをインストールする 以下のコマンドを実行します。 yarn add --dev lint-staged husky huskyをセットアップする 「 husky | husky」に倣って、以下の通り実行しました。 npx husky-init && yarn このとき、package.jsonとyarn.lockが更新…

Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する

はじめに Next.js13の開発環境構築手順 step03 をやっていこうと思います。 emotionやlinariaもCSS in JSのパッケージとして候補でしたが、Next.jsに組み込まれているstyled-jsxを使うことにしました。 以下のようなことを前提としてCSS周りの技術選定をして…

VSCodeのsettingsの項目について調べる

はじめに VSCodeの設定項目についてよくわからずにやっている部分が多いので、自分がよく使用している項目を中心に公式ページで調べてみようと思います。 この記事で例として書いているのは、個人的によく設定している値などで、VSCodeの初期値ではありませ…