vue-routerのワイルドカードキャッチ

vue-routerのワイルドカード(*)指定

vue3で使うVue Router 4で指定方法が変わってた。

import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './components/HomePage.vue';
import NotFoundComponent from './components/NotFoundComponent.vue';

const routes = [
  { path: '/', component: HomePage },
  // ワイルドカードルート
  { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundComponent },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

正規表現(.)を使用してマッチさせて解決。

ん？ なんで*じゃないの？

* と (.*) の違い

Vue Router 3（Vue 2用）までは、ワイルドカードルートを指定するために単純に*を使うことが一般的でした。これは、定義された他のルートにマッチしないすべてのパスに対してマッチするようなルートを設定する簡単な方法です。

しかし、Vue Router 4（Vue 3用）では、より複雑なパターンマッチングが可能になる正規表現を使用してルートパターンを定義することが推奨されています。ここで、/:pathMatch(.)の構文が使われるわけですが、この構文の各部分には以下のような意味があります。

/:pathMatchは、マッチしたパスの一部をキャプチャして、pathMatchという名前のパラメータに格納します。これにより、ルートのコンポーネント内で動的にマッチしたパスにアクセスできるようになります。 (.)は正規表現で、「任意の文字の0回以上の繰り返し」を意味します。つまり、どんなパスにもマッチすることを意味しています。 最後のは、このパターンが0回以上繰り返されることを許可します。これは、正規表現の一部というよりは、Vue Routerのパスマッチング機能におけるワイルドカードの繰り返しを示しています。

なぜ (.) なのか

この構文が採用されている主な理由は、Vue RouterがURLパスのセグメントをより柔軟にマッチさせ、キャプチャするための機能を提供することです。/:pathMatch(.)は「どんなパスにもマッチし、その全体をpathMatchパラメータとしてキャプチャする」という意味になります。

単に*を使用した場合、Vue Router 3までの挙動と同様に任意のパスにマッチするルートを定義できますが、Vue Router 4では正規表現を使ったより詳細なパターン定義が推奨されているため、この構文が標準的な方法として採用されています。

apt -qq upgrade -y とは

apt -qq upgrade -y の意味を調べた。 オプションの意味を知らずになんとなく使ってたのでメモ。

apt コマンドの -qq オプション

Linux システムでのパッケージ管理には apt コマンドが広く使用されます。特に自動化スクリプトや、出力を最小限に抑えたい場合に便利なオプションが -qq です。

-qq オプションの意味

-qq オプションは、apt コマンドの出力を最小限に抑えるために使用されます。具体的には、以下の2つの機能を提供します：

• -q (quiet): このオプションを一度指定すると、進行状況や一般的なメッセージが抑制されます。
• -qq (quiet level 2): このオプションを2回指定することで、さらに出力が抑制され、ほとんどまたは全くメッセージが表示されなくなります。

コマンドの例

パッケージのアップグレードを行う際に -qq オプションを使用する例は以下の通りです：

apt -qq upgrade -y

このコマンドは、システム上のパッケージを最新のバージョンにアップグレードします。

ここで、-y オプションは、すべての質問に対して自動的に「yes」と回答し、ユーザーの介入を必要としないようにします。

使用するメリット

-qq オプションを使用する主なメリットは、自動化されたスクリプトや、ログファイルのサイズを小さく保ちたい場合に出力を抑制できる点です。これにより、スクリプトの実行がよりスムーズになり、不要な情報による混乱を避けることができます。

以上です、よい自動化ライフを！

WordPressでWP REST APIを使用時に404 Not Foundエラーに直面した時の対応

はじめに

外部からブログの内容をフェッチしたいとき、WP REST APIを使ってみたら「404 Not Found」が出ちゃった。

環境

• WordPress: 6.4 (WordPress 4.7以降だとWP REST APIはデフォで入ってる。4.7未満ならプラグインを入れよう！)

前提

<あなたのWordPressのトップページ>/wp-json/wp/v2/posts でJSONを取得しようとしたら、404でうまくいかない

原因

パーマリンク設定が悪さをしている。 デフォルトの「基本」設定ではダメ。

設定を変えるのは簡単。 - パーマリンク設定: 設定 > パーマリンク設定 > 共通設定 > 「基本」

※これだと、サイト全体に影響があります

本番でなかなか手を出せないときは？

対応方法

URLパラメータを使って解決。

<あなたのWordPressのトップページ>/?rest_route=/wp/v2/posts

設定を変えずに済むから、簡単で安心。

まとめ

デフォルトでエラーになるって設計的にどうなのよっていうツッコミはおいておきましょう。

WP REST APIのリファレンス

ja.wp-api.org

DockerでMySQL初期化スクリプト docker-entrypoint-initdb.dが走らない時の対処法

Dockerを使ってMySQLのセットアップをしようとして初期化スクリプトをdocker-entrypoint-initdb.dにぶち込んだはいいけど なんかスクリプトが実行されない… imageをガッツリ削除して一からやり直すと、うまくいく。なぜ。

なぜ実行されないのか

MySQLのDockerイメージでは、docker-entrypoint-initdb.dディレクトリ内のスクリプトは、データベースが存在していない（つまり初回起動時）にのみ実行されます。

この問題は、データベースファイルをホストマシンと同期（バインドマウント）している場合に起こりやすいです。 同期されたデータベースファイルが存在すると、Dockerはデータベースが既に初期化されていると判断し、初期化スクリプトの実行をスキップします。

解決策は？

名前付きボリュームを使う

名前付きボリュームを使う方法

以下のdocker-compose.ymlサンプルは、名前付きボリュームを使用してMySQLデータベースをセットアップする方法を示しています。この設定では、MySQLの設定ファイル、初期化スクリプト、およびデータベースファイルを名前付きボリュームに保存します。

db:
  container_name: mysql-local
  image: mysql:8
  volumes:
    - ./docker/local/db/my.cnf:/etc/mysql/conf.d/my.cnf
    - mysql-local:/var/lib/mysql
    - ./docker/local/db/initDb.sql:/docker-entrypoint-initdb.d/initDb.sql
  # (中略)
volumes:
  mysql-local:

この構成では、mysql-localという名前のボリュームがMySQLのデータディレクトリ/var/lib/mysqlにマッピングされ、データの永続化を保証します。 加えて、カスタムのMySQL設定ファイルと初期化スクリプトが適切にコンテナに適用されます。

クリーンアップ

docker-compose down --volumeコマンドを使って、必要に応じて作成した名前付きボリュームを綺麗に消し去りましょう。 ただし、この操作はすべてのデータを削除するため、必要なデータが失われないように注意してください。

まとめ

• MySQLのDockerを使う時にDB初期化したいなら、スクリプトをdocker-entrypoint-initdb.dに置きましょう。
• 名前付きボリュームをdocker-composeで設定して、コンテナの/var/lib/mysqlに紐づけます。
• docker-entrypoint-initdb.dのスクリプトを再実行したい場合は、docker-compose down --volumeを使って名前付きボリュームを削除しましょう。ただし、DBが完全に初期化されるので注意が必要です。
• 再度upすると、docker-entrypoint-initdb.dのスクリプトが実行されます。

WordPressとVueでREST APIを使って最新記事とコメントを取得する

Vue3とWordPressを組み合わせて最新の記事やコメントを取得する入門的な内容です。

環境の準備

• Vue3系のセットアップ
• TypeScriptの採用
• AxiosでのHTTPリクエスト

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';

interface Post {
  id: number;
  title: { rendered: string };
}

interface Comment {
  id: number;
  author_name: string;
  date: string;
  content: { rendered: string };
}

const posts = ref<Post[]>([]);
const comments = ref<Comment[]>([]);

onMounted(async () => {
  try {
    const postsResponse = await axios.get('/wp-json/wp/v2/posts');
    posts.value = postsResponse.data;
    
    const commentsResponse = await axios.get('/wp-json/wp/v2/comments');
    comments.value = commentsResponse.data;
  } catch (error) {
    console.error(error);
  }
});
</script>

<template>
  <div class="index">
    <h1>最新の投稿</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title.rendered }}
      </li>
    </ul>
    <h2>最新のコメント</h2>
    <ul>
      <li v-for="comment in comments" :key="comment.id">
        <p>{{ comment.author_name }} ({{ comment.date }})</p>
        <p>{{ comment.content.rendered }}</p>
      </li>
    </ul>
  </div>
</template>

リクエストが404になる場合はパーマリンクを疑いましょう。 freelance-engineer.hatenablog.jp

MySQLのFLUSH PRIVILEGES について

MySQLのFLUSH PRIVILEGES;について

MySQLでユーザー権限を変更した際、その変更を即座に適用させるためにはFLUSH PRIVILEGES;コマンドを使用する。このコマンドは、MySQLサーバーに対して、権限テーブルを再読み込みするよう指示する。これにより、新たに付与された権限が反映され、削除された権限が無効化される。

FLUSH PRIVILEGES;の使用時機

FLUSH PRIVILEGES;は以下のような場合に使用される。

• GRANTやREVOKEコマンドを使用してユーザー権限を直接変更した後。
• CREATE USERやDROP USERコマンドを使ってユーザーを作成または削除した後。
• ユーザー権限に関連するテーブルを直接操作（例: INSERT、UPDATE、またはDELETEコマンドを使用）した後。

自動的な権限の再読み込み

MySQLでは、GRANT、REVOKE、CREATE USER、DROP USERコマンドを使用した際には、内部的に権限の再読み込みが自動的に行われるため、通常はFLUSH PRIVILEGES;を明示的に実行する必要はない。しかし、権限テーブルを直接操作した場合には、この自動的な再読み込みは行われないため、変更を有効にするにはFLUSH PRIVILEGES;の実行が必要になる。

コマンドの実行例

FLUSH PRIVILEGES;

この単純なコマンドは、MySQLサーバーに対して、権限テーブルの変更を再読み込みして適用するよう指示する。

注意点

• FLUSH PRIVILEGES;を実行するには、実行者がリロード権限（RELOAD privilege）を持っている必要がある。
• 権限テーブルを頻繁に直接編集するのは推奨されない。可能な限りGRANTやREVOKEコマンドを使用することが望ましい。

まとめ

FLUSH PRIVILEGES;コマンドは、MySQLの権限システムにおいて重要な役割を果たす。権限テーブルを直接操作した後や、何らかの理由で権限が即座に反映されていないと感じた際には、このコマンドを実行して権限の再読み込みを行うことができる。

GitHub CLIを使ってプルリクエストを作成する: gh pr create コマンド

GitHub CLIを使ってプルリクエストを作成する

GitHub CLIは、GitHubの操作をコマンドラインから行うことができる便利なツールです。

GitHub CLIのgh pr createコマンドを使用して、プルリクエストを簡単に作成する方法をまとめます。

前提条件

• GitHub CLIがインストールされていること
• GitHubにログインしていること (gh auth login コマンドを使用)

プルリクエストの作成

gh pr create コマンドを使用して、新しいプルリクエストを作成します。基本的な使用方法は以下の通りです。

gh pr create --title "プルリクエストのタイトル" --body "プルリクエストの説明"

オプション

gh pr create コマンドには、プルリクエストの作成をカスタマイズするための複数のオプションがあります。

• --title, -t: プルリクエストのタイトルを指定します。
• --body, -b: プルリクエストの説明文を指定します。
• --reviewer, -r: レビュアーを指定します。複数指定する場合は、カンマ区切りで指定します。
• --assignee, -a: アサインするユーザーを指定します。複数指定する場合は、カンマ区切りで指定します。
• --label, -l: ラベルを指定します。複数指定する場合は、カンマ区切りで指定します。
• --draft: プルリクエストをドラフトとして作成します。

例

以下は、レビュアーとラベルを指定してプルリクエストを作成する例です。

gh pr create --title "新機能の追加" --body "新しい機能についての説明" --reviewer "user1,user2" --label "bug,enhancement"

このコマンドは、"新機能の追加" というタイトルと "新しい機能についての説明" という説明文でプルリクエストを作成し、user1とuser2をレビュアーとして指定し、bugとenhancementのラベルを付けます。

まとめ

GitHub CLIのgh pr createコマンドを使用することで、プルリクエストの作成と管理が簡単になります。

詳細な情報はGitHub CLIのドキュメントやgh pr create --help コマンドで確認することができます。

cli.github.com