Motomichi Works Blog

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

制作

stylelint/postcss-css-in-jsは非推奨になっていた

参照したページ 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につい…

create next-app で自動生成されたtsconfig.jsonの設定項目を見てみる | Next.js その0005

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

ファイル保存時にESLintとPrettierで自動修正する

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

Nuxt3とVuetifyを使っているときに Hydration children mismatch in <div>: server rendered element contains fewer child nodes than client vdom. のwarnが出たので解消する

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

Vuetifyのv-selectの選択肢の見た目と選択済みアイテムの見た目を変更する(v-selectのスタイル変更) | Vuetify 3.x

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

Nuxt3のプロジェクトにVuetify3をインストールする | Nuxt3 その0006

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

src/layouts/default.vueとsrc/pages/index.vueを作成してsrc/app.vueに適用してみる | Nuxt3 その0005

参考にさせていただいたページ 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>

Sassをインストールする(lang="scss"を使えるようにする) | Nuxt3 その0004

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

srcDirの設定をしてapp.vueなどの資産を一階層深いところに移動する | Nuxt3 その0003

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

Macのターミナルに表示されるユーザ名とホスト名を変更する

参考にさせていただいたページ Macのターミナルのユーザー名の変更 - Qiita .zshrcの記述例 個人用の端末でよく使っている設定 以下のように記述します。 # ターミナルのユーザ名とホスト名の表示設定 export PS1="user@mac %1~ %# " 業務用の端末でよく使っ…

Next.jsの開発環境構築手順2022年12月版 | Next.js

はじめに yarnを使わずにnpmを使ってやります。 個人的に手順をまとめているだけなので、一般的にはイケてないかもしれません。 nodenv インストール可能なバージョンを確認します。 % nodenv install -l 最新をインストールします。 % nodenv install 19.4.…

Viteをやめてwebpackを使う | Nuxt3 その0002

参考にさせていただいたページ nuxt.js - How to use webpack 5 with nuxt3 project - Stack Overflow Nuxt Configuration Reference · Nuxt nuxt.config.tsの編集 以下のようにbuilderを指定します。 export default defineNuxtConfig({ builder: 'webpack'…

Nuxt3をインストールしてみる | Nuxt3 その0001

参考にさせていただいたページ Installation · Get Started with Nuxt Nuxt3 インストールしてみた インストール まず公式ページに倣って以下のコマンドを実行しました。 npx nuxi init nuxt3_sample 以下のように表示されました。 user@mac samples % npx n…

JavaScriptのthisが指すものについて

参考にさせていただいたページ 【JavaScriptの応用】thisの振る舞い | ワードプレステーマTCD

TypeScript学習日記 その0013 readonly修飾子を解除する

参考にさせていただいたページ How to Change readonly Properties to be Writable in TypeScript? - Designcise Change a readonly property to mutable in TypeScript | bobbyhadz Improved control over mapped type modifiers: TypeScript: Documentatio…

nginxのデバッグ用のログを独自のフォーマットで出力する(nginx.conf内で使用している変数の値をログに出力する)

空ファイルを作成しておく まず /var/log/nginx/debug_val.log を空ファイルで作成しておきます。 nginx.confの書き方 以下のように、httpディレクティブにlog_format フォーマット名 "フォーマット内容";として、フォーマットを定義します。 serverディレク…

VSCodeのworkspaceごとにeslint対象ディレクトリを設定する

解決したかった問題 リポジトリのrootディレクトリをVSCodeのワークスペースとして開きたいけど、VSCodeのデフォルト設定ではワークスペースを基点としてimportパスをlintしてしまうので、ずっと以下のようなeslintエラーが出てしまっていました。 Missing f…

もう一度Next.jsのlearn courseをやりながら要点をまとめる | Next.js 12.x その0004

Navigate Between Pages (ページ間を移動する) について ページ遷移にnext/linkコンポーネントを使う import Link from 'next/link'; Assets, Metadata, and CSS (アセット、メタデータ、CSS) について 画像の表示にnext/imageコンポーネントを使う import I…

create-next-appするときに色々オプションなどがあるので調べる | Next.js 12.x その0003

参考にさせていただいたページ Create Next App | Next.js TypeScript 公式ページに書いてありました。 npxとyarnとでハイフンがあったり無かったりします。 npx create-next-app@latest --ts # or yarn create next-app --typescript # or pnpm create next…

have_contentの引数に正規表現を渡す | RSpec+Capybaraその0006

サンプルコード 以下のように書けた expect(tr_element).to have_content /^[0-9]+$/ tr_elementとなっている箇所は何か適当にfindした要素を入れてください。 以下のように括弧で括る方がrubocopの Lint/AmbiguousRegexpLiteral ルールに引っかからないかも…

macのchromeでオレオレ証明書のHTTPSサイトにアクセスできない場合の対処法

参考にさせていただいたページ https://qiita.com/ty_1592/items/86e1966fe2888140f215 macOS CatalinaでChromeからオレオレ証明書のHTTPSサイトにアクセスできない場合の対処法 - Qiita Macでキーチェーンアクセスを使用してキーチェーンに証明書を追加する…

Next.jsのlearn courseをやってみる | Next.js 12.x その0002

参考にさせていただいたページ Setup - Create a Next.js App | Learn Next.js Create a Next.js App (Next.jsアプリを作成する) 以下のコマンドでcreateしました。 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-l…

Next.jsをTypeScriptで始めてみる | Next.js 12.x その0001

参考にさせていただいたページ Getting Started | Next.js create next-appする 作業ディレクトリを作成します。 mkdir next-js-sample 公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。 yarn create next-app --ty…

MacのVSCodeの全体を拡大・縮小するショートカット

はじめに コード部分のフォントサイズだけではありません。 UIが全体的に拡大・縮小されるショートカットです。 方法 command と shift と + を押すと拡大されます。 command と - を押すと縮小されます。

2つの配列が持っている要素が等しいかどうかを判定する TypeScript

はじめに 配列の要素の順番は関係なく、2つの配列のlengthが等しいかどうか、2つの配列が同じ要素を持っているかを判定します。 関数の定義と実行 以下の通り定義します。 const isSameArr = (arr1: number[], arr2: number[]) => { if (arr1.length !== arr…

VueのOptionsAPIのときに取得していたthis.$elはCompositon APIではどのように取得するのだろうかという話

参考にさせていただいたページ vue.js - Vue 3 Composition API - How to get the component element ($el) on which the component is mounted? - Stack Overflow どうやるか 「vue.js - Vue 3 Composition API - How to get the component element ($el) o…

Vuetifyのv-menuが表示されたときや非表示になったときに何か処理をしたい Vuetify 2.x その0001

参考にさせていただいたページ javascript - How disable to select minutes in v-time-picker widget? - Stack Overflow 今日の環境 vue: 2.6.11 vuetify: 2.5.4 @vue/composition-api: v1.0.0-beta.22 はじめに Vue2のcompositon apiなので、Vue3だとまた…

highcharts-vueのコンポーネントに渡すpropsの型 highcharts-vue 1.x + TypeScript その0001

参考にさせていただいたページ highcharts/highcharts-vue GitHub GitHub - highcharts/highcharts-vue highcharts 公式ドキュメント Highcharts JS API Reference 今回使用しているバージョン highcharts-vue v1.4.0 を使用していて、highcharts v9.2.2に依…

Day.jsの使い方について

参考にさせていただいたページ Day.js公式 GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API Installation · Day.js その他 Day.jsの簡単な使い方 便利な日付操作ライブラリ parse '202…

Visual Studio Codeの静的解析を再実行する Restart TS server / Restart ESLint Server

参考にさせていただいたページ typescript - Where is VSCode's "Restart TS server"? - Stack Overflow コマンドパレットを開く 以下のキーでコマンドパレットを開きます。 Mac: Command + Shift + P Windows: Ctrl + Shift + P 再読み込みする restart と…