Vue.js vue serveコマンドで.vueファイルを実行することができない原因
概要 vue serveコマンドはプロジェクトを作成せずに、.vueファイルを単体で実行することができる。 しかし、Vue CLI5では動作しない。（2022年4月現在） 解決法 Vue CLI4では正常に動作する。 npm install @vue/cli@4npm install @vue/cli-service-globalnpx vue serve Hoge.vue
プログラミング
Vue.js 
Git BitbucketからGitHub, GitHubからBitbucketへの移行方法
概要 Gitリポジトリを変更したい場合、作業ディレクトリで以下のコマンドを実行し、リポジトリURLを変更すればよい。 git remote set-url origin 移行先リポジトリURL ※ git remote -vで変更されたかどうか確認可能 以後は、それまでと同じようにcommit, pushするだけ。
React 「はじめてつくるReactアプリ with TypeScript」の感想・備忘録
kindle本「はじめてつくるReactアプリ with TypeScript」のまとめ。 点数 82点 感想 とてもわかりやすかった。 作成するアプリは簡単なものだが、ひとつひとつの説明が丁寧で理解しやすい内容だった。 Reactのimportが不要になった React version 17からはindex.tsx以外のファイルではimport React from 'react';を省略できる...
React 「React学習挫折経験者による挫折しないReact基礎学習」の感想・備忘録
kindle本「React学習挫折経験者による挫折しないReact基礎学習」のまとめ。 点数 50点 感想 CDNを使って関数コンポーネントで実装する、という内容だった。 Props, Stateを少し使って終わりのため、本当の初心者向けの内容だと思う。
JavaScript 【JavaScript】正規表現にgオプションを指定して複数回実行する場合の注意点
概要 JavaScriptの正規表現オブジェクトのtestメソッドをgオプションを指定して実行した場合、正規表現オブジェクト内に次の開始位置が保持される。（lastIndexプロパティ） そのため、同じ正規表現オブジェクトを複数回使い回すと、2回目以降は開始位置が先頭ではなくlastIndexの位置からとなる。 よって、同じ文字列に対して同じ正規表現オブジェクトのtestメソッドを実行しても、1回...
WordPress 【WordPress】特定の親カテゴリーに所属する子カテゴリー一覧を親も含めて表示する
概要 固定ページなどでカテゴリー一覧を表示する場合、全てのカテゴリーであればwp_list_categories()を使うだけで表示される。 しかし、特定のカテゴリーとその子カテゴリーだけを表示したい場合、WordPressで用意されている関数では実現できないようなので、ショートコードを使って実装してみた。 手順 functions.phpにショートコードの定義を追加 function getCa...
WordPress ロリポップのサーバで403エラーが出てしまう場合の解決法
概要 ロリポップのサーバにはWAFというセキュリティ設定があり、有効にしていると一部のWordPressプラグインが正常に動作しないことがある。 「いいね」ボタンを簡単に設置することができる「WP ULike」プラグインの場合、設定画面で「Save」ボタンをクリックするとアラートにJavaScriptのソースが表示されてしまう。 原因 WAFの制限により、wp-admin/admin-ajax.p...
CSS [new.css] HTMLだけで使うことができるCSSフレームワーク
概要 Bootstrap, Material-UI, VuetifyなどのCSSフレームワークは、独自のクラスをタグのクラス属性に割り当てなければならない。 new.cssを使うと、HTMLタグを記述するだけでモダンなウェブサイトを作成することができる。細かいデザインを実現することは難しいが、簡単なサイトであればキレイにまとめることができる。 使い方 <head></head>内に以下の2行を追加...
CSS ダークモードの場合にCSSを切り替える(prefers-color-scheme)
CSSのメディアクエリで、@media (prefers-color-scheme: dark) {// スタイル定義}とすると、ユーザーのOS設定がダークモードの場合のスタイルを定義することができる。 // ダークモードの場合 @media (prefers-color-scheme: dark) { body { background-color: #000; color: #fff; } }...
React Reactで「Form submission canceled because the form is not connected」となる原因
現象 フォームのonSubmitイベントハンドラ にて、react-router-domを使ってhistory.push('xxx')のように画面遷移を行うと、コンソールにForm submission canceled because the form is not connectedというエラーが表示される。 import React, {FC, FormEvent} from 'react'...