参照したページ @ant-design/charts の GitHub リポジトリ GitHub - ant-design/ant-design-charts: A React Chart Library Ant Design Charts 1.x の公式ドキュメント https://ant-design-charts.antgroup.com/examples G2, G6, X6, L7 の公式ドキュメント …

参照したページ 【TypeScript】Object.keys() の返り値をstring[]型でなくユニオン型の配列にしたい 関数を定義して解決する 以下のようにするとkeysは ("hoge" | "foo" | "baz")[] 型になります。 const obj = { hoge: 'value', foo: 'value', baz: 'value'…

参照したページ 前回の props や state はどうすれば取得できますか？: フックに関するよくある質問 – React サンプルコード const [hoge, setHoge] = React.useState(''); const [prevHoge, setPrevHoge] = React.useState(''); React.useEffect(() => { re…

参照したページ Chart.js 公式ドキュメント latestバージョンのドキュメント: Chart.js | Chart.js 4.4.0のドキュメント: Chart.js | Chart.js jsDelivr chart.js CDN by jsDelivr - A CDN for npm and GitHub pluginの作り方 Plugins | Chart.js Chart.js 2…

参照したページ MacでPATHを通す .bash_profileの作成と編集 - Motomichi Works Blog はじめに まず前提として、 brew を使って nodenv をインストール済みです。 nodenv を使って node をインストール済みです。 例として npm で yarn をインストールして p…

参照したページ GitHub - eBay/nice-modal-react: A modal state manager for React. 今日の環境 ebay/nice-modal-react: 1.2.10 next: 13.4.4 はじめに Next.jsのアプリケーションにnice-modal-reactを使って、実用的なモーダルを実装していきます。 Next.j…

はじめに 自分の備忘のためですが、iPhoneの画面幅を検索するとページによって書いてある数値が違ったので手元にある実機で調べてみました。 幅と高さ 機種 幅 高さ(アドレスバー表示時) iPhone 12 mini 375px 629px iPhone 14 390px 664px

参照したページ フックに関するよくある質問 – React 前回の props や state はどうすれば取得できますか？ Hooks時代のReactライフサイクル完全理解への道 はじめに この記事は個人的な学習記録です。 useEffectのクリーンアップ関数の駄目な使い方について…

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

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

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

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

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

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

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

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

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

はじめに Next.js13の開発環境構築手順 step02 をやっていこうと思います。 Next.jsのベーシックな設定を確認する Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。 Configuring: ESLint | Next.js eslint-confi…

参考にさせていただいたページ Husky - Git hooks Basic Features: ESLint | Next.js lint-staged + husky でコミットするファイルだけ cspell を走らせる Next 12 で ESLint, Prettier, husky, lint-staged の環境構築 ++ Gaji-Laboブログ はじめに lint-st…

参照したページ シンタックスハイライト identifier: blanu.vscode-styled-jsx 参考リンク: styled-jsx - Visual Studio Marketplace 入力補完 identifier: Divlo.vscode-styled-jsx-languageserver 参考リンク: styled-jsx Language Server - Visual Studio…

はじめに 2023年3月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。 かなり長くなるのでいくつかのstepに分けて書いていきます。 環境 主に以下のような環境でNext.js 13の環境構築を行なっていきます。 CSSを書くにあたってNext.…

参照したページ GitHub - stylelint/postcss-css-in-js: PostCSS syntax for parsing CSS in JS literals stylelint/to-15.md at main · stylelint/stylelint · GitHub はじめに Next.jsに組み込みで入っているstyled-jsxを使おうと思って、stylelintについ…

参考にさせていただいたページ TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント tsconfig.jsonのよく使いそうなオプションを理解する はじめに yarn create next-app --typescript でアプリケーションを作成しました。 生…

参考にさせていただいたページ VSCodeを使っている場合の参考情報 TypeScriptのプロジェクトにESLintとPrettierを併用してVSCodeの保存時に自動フォーマットをする | ZUMA Lab VSCodeを使っていない場合の参考情報 GitHub - Qard/onchange: Use glob pattern…

参考にさせていただいたページ https://kubio.dev/nuxt-client-only/ 問題のコード 例えば以下のような感じで v-select を使用すると [Vue warn]: ... と出力されます。 <template> <div class="index-page"> </div></template>

参考にさせていただいたページ Vuetify公式ページ この記事執筆時点ではVuetify3の公式ドキュメントがまだ不充分だったので、以下のVuetify2の公式ドキュメントを参考にしました。 Selectsコンポーネント: Vuetify — A Material Design Framework for Vue.js…

参考にさせていただいたページ 公式ページ Get started with Vuetify 3 — Vuetify その他のページ How to use Vuetify with Nuxt 3 | Cody Bontecou はじめに 2023年1月4日現在の手順です。 この記事では以下のバージョンを使用しています。 "nuxt": "3.0.0"…

参考にさせていただいたページ layouts/ · Nuxt Directory Structure src/app.vueの編集 以下の通り記述しました。 <template> <NuxtLayout> <NuxtPage /> </NuxtLayout> </template> src/layouts/default.vue 以下の通り記述しました。 <template> <div class="default-layout"> <div>default-layout</div> <ul> </ul></div></template>

参考にさせていただいたページ Nuxt - Configuration sassとsass-loaderをインストールする 以下のコマンドでインストールしました。 npm install --save-dev sass sass-loader 参考にした「Nuxt - Configuration」では、sass-loader@10とバージョン指定され…

参考にさせていただいたページ 公式ドキュメントのNuxtConfigのページ Nuxt Configuration Reference · Nuxt Nuxt Configuration Reference · Nuxt nuxt.config.tsの編集 以下のようにsrcDirプロパティを追記します。 export default defineNuxtConfig({ src…