JavaScript GitHub Actions のログを見やすくする
console.log や process.stdout.write でログに出力できますが、特定のフォーマットで出力することでログが見やすくなります。
フォーマット
warning
警告メッセージを表示する際に使用しま...
JavaScript
JavaScript JavaScript GitHub Actions のリリース手順を自動化する GitHub Actions
GitHub Actions の種類にはDockerコンテナ版とJavaScript版があります。
元々はDocker版しかなかったようですが、JavaScript版は起動がとても早く、これからはJavaScript...
JavaScript 【Gutenberg】ブロックエディタに文字数カウントを常時表示する
ブロックエディタに任意の要素を追加する方法を使用することで、文字数カウントを常時表示させておくことが可能です。
文字数カウントコンポーネント作成
Word Count パッケージを使用して文字数カウント用のコンポー...
JavaScript 【Gutenberg】ブロックエディタに任意の要素を追加する
基本はReact
ブロックエディタは React なので、ブロックエディタの持っている情報などを利用するには React を使用したほうがよいです。
コンポーネントを作成
通常通りにコンポーネントを作成します。
d...
JavaScript 【Vue.js】i18n をテンプレート以外から利用する
Vue I18n の設定例
plugins/i18n.js
import Vue from 'vue';
import VueI18n from 'vue-i18n';
import options from './optio...
JavaScript JavaScript でオブジェクトの配列の特定のキーの値を使用してオブジェクトに変換する
やりたいこと
const data = [
{
id: 1,
name: 'test1',
},
{
id: 2,
name: 'test2',
},
{
id: 3,
...
JavaScript Gutenbergのブロック検索のキーワードを自由に設定できるようにしてみる
機能
ブロック検索に使用するキーワードをサイドバーから設定できるようにします。
いくつかのサイトでも言及されていますが、ブロックの検索キーワードが日本語になっているものがあります。
スラッ...
JavaScript Gutenbergプラグイン用のデータを永続化する
Gutenbergには store による状態管理を簡単に行う方法が用意されています。
さらにその状態をブラウザのローカルストレージに保持するための仕組みもあります。
設定を保存することで、より便利なプラグインを作成することが...
JavaScript GutenbergのregisterStoreで注意すべき点
より高度なGutenbergプラグインを作成する場合は registerStore を使用した状態管理が必須です。
実装方法によっては状態を変更してもすぐに画面に反映されないため注意が必要です。
例
例えば f...
JavaScript Gutenbergのツールバーにドロップダウンを追加する
Gutenberg（ブロックエディタ）のツールバーにボタンを追加する方法は以前紹介しました。
ただ、この方法の場合はドロップダウンでまとめることはできません。
Gutenberg プラグイン v5.3 または Word...