プログラミング

スポンサーリンク
React

「はじめてつくるReactアプリ with TypeScript」の感想・備忘録

kindle本「はじめてつくるReactアプリ with TypeScript」のまとめ。 点数 82点 感想 とてもわかりやすかった。 作成するアプリは簡単なものだが、ひとつひとつの説明が丁寧で理解しやすい内容だった。 Reactのimportが不要になった React version 17からはindex.tsx以外のファイルではimport React from 'react';を省略できる...
2021.09.14
React
React

「React学習挫折経験者による挫折しないReact基礎学習」の感想・備忘録

kindle本「React学習挫折経験者による挫折しないReact基礎学習」のまとめ。 点数 50点 感想 CDNを使って関数コンポーネントで実装する、という内容だった。 Props, Stateを少し使って終わりのため、本当の初心者向けの内容だと思う。
2021.09.07
React
JavaScript

【JavaScript】正規表現にgオプションを指定して複数回実行する場合の注意点

概要 JavaScriptの正規表現オブジェクトのtestメソッドをgオプションを指定して実行した場合、正規表現オブジェクト内に次の開始位置が保持される。（lastIndexプロパティ） そのため、同じ正規表現オブジェクトを複数回使い回すと、2回目以降は開始位置が先頭ではなくlastIndexの位置からとなる。 よって、同じ文字列に対して同じ正規表現オブジェクトのtestメソッドを実行しても、1回...
2021.07.25
JavaScript
スポンサーリンク
WordPress

【WordPress】特定の親カテゴリーに所属する子カテゴリー一覧を親も含めて表示する

概要 固定ページなどでカテゴリー一覧を表示する場合、全てのカテゴリーであればwp_list_categories()を使うだけで表示される。 しかし、特定のカテゴリーとその子カテゴリーだけを表示したい場合、WordPressで用意されている関数では実現できないようなので、ショートコードを使って実装してみた。 手順 functions.phpにショートコードの定義を追加 function getCa...
2020.12.07
WordPress
WordPress

ロリポップのサーバで403エラーが出てしまう場合の解決法

概要 ロリポップのサーバにはWAFというセキュリティ設定があり、有効にしていると一部のWordPressプラグインが正常に動作しないことがある。 「いいね」ボタンを簡単に設置することができる「WP ULike」プラグインの場合、設定画面で「Save」ボタンをクリックするとアラートにJavaScriptのソースが表示されてしまう。 原因 WAFの制限により、wp-admin/admin-ajax.p...
2020.11.23
WordPressサーバ
CSS

[new.css] HTMLだけで使うことができるCSSフレームワーク

概要 Bootstrap, Material-UI, VuetifyなどのCSSフレームワークは、独自のクラスをタグのクラス属性に割り当てなければならない。 new.cssを使うと、HTMLタグを記述するだけでモダンなウェブサイトを作成することができる。細かいデザインを実現することは難しいが、簡単なサイトであればキレイにまとめることができる。 使い方 <head></head>内に以下の2行を追加...
2020.10.19
CSS
CSS

ダークモードの場合にCSSを切り替える(prefers-color-scheme)

CSSのメディアクエリで、@media (prefers-color-scheme: dark) {// スタイル定義}とすると、ユーザーのOS設定がダークモードの場合のスタイルを定義することができる。 // ダークモードの場合 @media (prefers-color-scheme: dark) { body { background-color: #000; color: #fff; } }...
2020.10.15
CSS
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'...
2020.10.02
React
JavaScript

【JavaScript】ドラッグアンドドロップAPIの使い方と動作しない時の原因

Drag & Drop APIとは Drag & Drop APIは要素をドラッグアンドドロップすることができるHTML5のAPIであり、ほぼ全てのブラウザで動作する。（※スマートフォンでは動作しない） Drag & Drop APIの使い方 ドラッグ ドラッグしたい要素にdraggable="true"を付ける。 <p id="draggable" draggable="true" style=...
2020.09.10
JavaScript
JavaScript

JavaScript(ES2015, ES6)でオブジェクトをコピーする方法

概要 ES2015から導入された分割代入を使うと、オブジェクトのコピーを簡単に記述することができる。 const obj = {name: 'hoge', age: 20}; const newObj = { …obj }; ES5の場合 Object.assign()を使う。 var obj = {name: 'hoge', age: 20}; var newObj = Object.assig...
2020.09.03
JavaScript
スポンサーリンク
次のページ