プログラミング学習サイト「paiza」には様々なコーディング問題が用意されています。今回は「N * N の 2 次元配列の表示」という問題を JavaScript で解いた方法について解説します。この問題は N×N の九九表（掛け算表）を出力するというシンプルながらも配列操作の基本を学べる良問です。

問題の概要

【n * n の 2 次元配列の表示】N * N の九九表の出力 JavaScript編（paizaランク C 相当）

問題の要件は次のとおりです：

• 入力された整数 N に対して、N×N の掛け算表（九九表）を出力する
• 各行の数値は半角スペースで区切る

例えば、N=3 の場合、以下のような出力になります：

1 2 3
2 4 6
3 6 9

解答コード

まずは解答コードを見てみましょう：

const n = parseInt(lines[0])
const arr = [...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))
arr.map((item) => console.log(item.join(" ")))

たった3行のコードですが、JavaScript の配列操作とモダンな文法をふんだんに使っています。一行ずつ丁寧に解説していきます。

コードの解説

1行目：入力値の取得と変換

const n = parseInt(lines[0])

この行では、入力された文字列（lines[0]）を整数に変換しています。parseInt 関数を使うことで、文字列を数値に変換できます。これにより、九九表のサイズ N が決まります。

2行目：二次元配列の生成

const arr = [...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))

この行が今回のコードの核心部分で、複数のテクニックを組み合わせています。

Array(n) と スプレッド構文 [...]

Array(n) は長さ n の配列を生成しますが、各要素は undefined です。この配列を直接 map メソッドで処理しようとすると、undefined の要素に対して処理が行われないという問題があります。

そこでスプレッド構文 [...Array(n)] を使うことで、undefined で埋められた長さ n の配列を新しい配列に展開します。これにより、map メソッドが各要素に対して確実に実行されるようになります。

二重の map による二次元配列の作成

[...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))

外側の map は行を生成し、内側の map は各行の列（セル）を生成します。

• 外側の map の引数 (_, i) の i は行のインデックス（0から始まる）
• 内側の map の引数 (_, p) の p は列のインデックス（0から始まる）
• (i+1)*(p+1) で、実際の掛け算の値を計算（インデックスは0始まりなので1を足す）

アンダースコア _ は、使用しない引数（この場合は配列の各要素）を無視するための慣習的な書き方です。

この部分により、N×N の二次元配列 arr が完成します。例えば N=3 の場合、次のような配列になります：

[
  [1, 2, 3],  // (0+1)*(0+1), (0+1)*(1+1), (0+1)*(2+1)
  [2, 4, 6],  // (1+1)*(0+1), (1+1)*(1+1), (1+1)*(2+1)
  [3, 6, 9]   // (2+1)*(0+1), (2+1)*(1+1), (2+1)*(2+1)
]

3行目：結果の出力

arr.map((item) => console.log(item.join(" ")))

この行では、作成した二次元配列 arr の各行（item）を取り出し、join(" ") メソッドで要素をスペースで区切った文字列に変換してから console.log で出力しています。

join メソッドは配列の要素を指定した区切り文字（ここではスペース）で連結した文字列を返します。

まとめ

今回のコードは、JavaScriptの配列操作と関数型プログラミングの手法を使って、N×N の九九表を簡潔に表現しています。特に注目すべき点は：

1. スプレッド構文と Array(n) を組み合わせた空配列の初期化
2. map メソッドを二重に使った二次元配列の生成
3. インデックスを利用した計算と変換

このようなコーディングスタイルは、多くのモダンなJavaScriptプロジェクトで見られ、コードの可読性と簡潔さを両立させています。

この記事が皆さんのJavaScript学習の参考になれば幸いです。他のプログラミング問題にも同様のテクニックを応用してみてください！

発展課題

さらに学習を深めたい方へ、いくつかの発展課題を提案します：

1. reduce メソッドを使って同じ結果を得るコードを書いてみる
2. 各セルの表示幅を揃えるように改良する（例：二桁の数字も右揃えにする）
3. 九九表だけでなく、任意の計算（足し算、引き算など）に対応するように拡張する

これらの課題に取り組むことで、JavaScript の配列操作への理解がさらに深まるでしょう。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

コマンドチェインとは？

コマンドチェインは、Vivaldiブラウザの機能を組み合わせて、複数の操作を一度に実行できる強力な機能です。JavaScriptコマンドと組み合わせることで、より柔軟なURL操作が可能になります。

URLコピー用コマンドの準備

まず、以下の2つのJavaScriptコマンドを用意します。

1. 通常のURLコピー用コマンド

javascript:(function(){e = document.createElement('textarea');e.textContent = document.URL;document.body.appendChild(e);e.select();document.execCommand('copy');e.remove();})();if(history.replaceState){history.replaceState({},null,location.href);};

2. マークダウン形式のURLコピー用コマンド

javascript:(function(){e = document.createElement('textarea');e.textContent = '['+document.title +']('+ document.URL+')';document.body.appendChild(e);e.select();document.execCommand('copy');e.remove();})();if(history.replaceState){history.replaceState({},null,location.href);};

コマンドチェインの設定手順

1. 設定画面を開く
   • Vivaldiのメインメニューから「設定」を開きます
   • または、Alt + Pのショートカットキーを使用します
2. Quick Commandsの設定
   • 左側のメニューから「Quick Commands」を選択
   • 「カスタムコマンドの追加」をクリック
   • 上記の2つのJavaScriptコマンドをそれぞれ別のカスタムコマンドとして登録
   • 分かりやすい名前を付ける（例：「URL Copy」「Markdown URL Copy」）
3. コマンドチェインの設定
   • 左側のメニューから「キーボード」を選択
   • 「コマンドチェイン」のセクションに移動
   • 以下の2つのコマンドチェインを作成
   • 通常のURLコピー用：
     • チェイン名：「URL Copy」
     • 作成したカスタムコマンド「URL Copy」を選択
     • ショートカットキー：Ctrl + Shift + C
   • マークダウン形式のURLコピー用：
     • チェイン名：「Markdown URL Copy」
     • 作成したカスタムコマンド「Markdown URL Copy」を選択
     • ショートカットキー：Ctrl + Shift + C + Alt

コマンドの動作説明

これらのコマンドは以下のような処理を行います

1. 通常のURLコピー

• 現在のページのURLをクリップボードにコピー
• 一時的なテキストエリアを作成・削除
• ページの状態を維持

1. マークダウン形式のURLコピー

• 現在のページのタイトルとURLをマークダウン形式でコピー
• [ページタイトル](URL)の形式で出力
• 同様に一時的なテキストエリアを使用

実践的な使用方法

設定完了後は以下のように使用できます

1. 通常のURLコピー

• ショートカットキー：Ctrl + Shift + C
• 用途：SNSへの共有やメールでのURL共有時

1. マークダウン形式でのURLコピー

• ショートカットキー：Ctrl + Shift + C + Alt
• 用途：MarkdownエディタでのブログやWiki執筆時

メリット

• 効率的なURLのコピーが可能
• JavaScriptによる確実なコピー処理
• ページタイトルを含めたマークダウン形式での出力
• ページの状態を維持したクリーンな動作
• カスタマイズ可能なショートカットキー

注意点

• JavaScriptコマンドは慎重にコピー・ペーストしてください
• ショートカットキーの競合に注意が必要です
• 一部のウェブサイトではセキュリティ設定により動作しない場合があります
• カスタムコマンドの名前は分かりやすいものを設定しましょう

まとめ

Vivaldiのコマンドチェイン機能とJavaScriptコマンドを組み合わせることで、より効率的なURL操作環境を実現できます。特にMarkdown形式での執筆作業が多い方にとって、この設定は作業効率を大きく向上させてくれるでしょう。

ぜひ皆さんも、これらのコマンドを活用して、作業効率の向上を図ってみてください！

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

WSL (Windows Subsystem for Linux) でUbuntuを使用していると、ログイン時に表示される案内メッセージが気になることがあります。この記事では、そのメッセージを非表示にする簡単な方法をご紹介します。

表示されるメッセージについて

WSLにてUbuntuをインストールし、起動すると下記メッセージが表示されます。

This message is shown once a day. To disable it please create the
/home/{user}/.hushlogin file.

このメッセージは1日1回表示され、システムの基本的な情報や最終ログイン日時などを知らせる役割があります。

メッセージを非表示にする方法

このメッセージを表示させないようにするには、ホームディレクトリ（/home/{user}/）に.hushloginというファイルを置きます。

touch /home/{user}/.hushlogin

上記のコマンドでホームディレクトリにファイルを作成することができます。なお、{user}の部分は、実際のユーザー名に置き換えてください。

補足事項

• .hushloginファイルは空のファイルで問題ありません
• ファイルを削除すれば、再びメッセージが表示されるようになります
• この設定はユーザーごとに適用されます

まとめ

WSL環境でのUbuntuログインメッセージを非表示にする方法について解説しました。簡単な操作で環境をよりすっきりと使いやすくすることができます。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

./start-database.sh

エラーの原因

このエラーは、スクリプトファイルに実行権限が付与されていないことが原因です。

Gitは通常、ファイルの実行権限（executable permission）を保持してコミットされないため、クローンした直後のスクリプトファイルには実行権限がありません。

解決方法

今回は下記のコマンドを実行することで、無事にデータベースの環境構築を行うことができました。

chmod +x ./start-database.sh //ファイルに実行権限を追加する
./start-database.sh

予防策

今回はすでに作成されているリポジトリをクローンして環境構築をしようとしたため、実行時に権限を追加する必要がありました。

Gitにスクリプトファイルをコミットする際に、実行権限を明示的に付与することができます。

2種類の対応方法があるので、どちらかを実行します。

git update-index --chmod=+x ./start-database.sh
git add --chmod +x ./start-database.sh

まとめ

「Permission denied」というエラーは実行権限の問題です。

chmod +xコマンドを使用することで、解決することができます。

ただ、クローンするたびに手元で実行権限を追加するのも面倒なのでリポジトリ内で予防しておくと開発をスムーズに進められます。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

• WSL : 2.2.4.0
• Node.js : 20.18.0
• Playwright : 1.48.0

Host system is missing dependencies to run browsers.というエラー

Playwrightを導入して、動作確認のためにテストを実行したところ上記のエラーメッセージが発生してwebkitのテストのみ失敗しました。

「Host system is missing dependencies to run browsers.」というエラーが発生する場合、必要なブラウザの依存関係がシステムにインストールされていない可能性があるため下記コマンドで依存関係をインストールすれば解決します。

npx playwright install-deps

Happy hacking!

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

悩んでいる人

• iPhoneやAndroidとPC、タブレットなど複数の端末とデータを共有したいけど、方法がわからない…
• なるべくシンプルに使えるメモアプリはないかな？

この記事を読むと外部のクラウドストレージを使用して、どの端末でもメモを同期することができるようになります。

Obsidianって何？というかたはこちらの記事で解説しています。

公式のプラグインは有料

メモや設定を複数端末で同期させるObsidian Syncというプラグインが公式で用意されています。

月額4ドルの廉価プランも登場しましたが、ストレージ1GBは少し心配かもしれません。

大量のメモや添付ファイルなどを扱う場合は、より大容量のプランを検討する必要があります。

無料で同期させるにはRemotely Saveがオススメ

公式が同期プラグインを用意しているのはわかったけれど、無料でできるなら無料のほうがいいですよね。

Remotely Saveというコミュニティプラグインを使えば無料で同期ができます。

データの同期先として以下の5種類が選択できます。

• S3 or Compatible（Amazon S3）
• Dropbox
• Wevdav
• OneDrive for personal
• Webdis (HTTP for Redis®)

普段使用しているサービスの容量が余っていれば、そのサービスを使用するのがいいですが、なければDropBoxかOneDriveのアカウントを作成して試してみることをおすすめします。

筆者はOneDriveの容量がフルで余っていたためOneDriveを同期先にしています。

Remotely Saveの設定方法

コミュニティプラグインを有効化

Obsidianをインストールした初期状態ではコミュニティプラグインは無効化されています。

画面下の歯車アイコンをクリックして、コミュニティプラグインを開き「コミュニティプラグインを有効化」をクリックします。

Remotely Saveをインストール

コミュニティプラグインの「閲覧」をクリックします。

「Remotely Save」を検索し、インストールします。

クラウドストレージと紐づける

お好みのクラウドストレージを選択し、認証情報を入力して紐づけを行います。

これでRemotely Saveを使用する準備が整いました。

同期タイミングの設定

Remotely Saveには2種類の同期方法（手動・自動）があります。

以下でそれぞれの同期について解説します。

手動で同期する方法

サイドバーにあるRemotely Saveのアイコンをクリックします。

下記のメッセージが出たら同期完了です。（OneDriveを使用している例）

1/2 Remotely Save starts running (onedrive)
2/2 Remotely Save finished!

効率的に作業するために、同期の操作にショートカットキーを割り当てることをおすすめします。

1. 画面下の歯車マークをクリック
2. ホットキーをクリック
3. Remotely Saveを検索し、好きなキーを割り当てる

筆者はCtrl + shift + S を割り当てていますが、他のソフトやPC自体のショートカットキーで割り当てのないキーを使用しましょう。

自動で同期する方法

Remotely Saveの設定画面から、自動同期のオプションを設定できます。

• 同期間隔：何秒ごとに更新するか、またはファイルに変更があったタイミングで更新するか
• 起動時の同期：Obsidian起動時にどのタイミングで更新するか

自動同期についての設定箇所は3箇所あり、翻訳すると以下のようになります。

Schedule for Auto Run：自動実行のスケジュール

プラグインは、一定の間隔ごとに実行をスケジュールしようとします。バッテリーに影響を与える可能性があります。

Run once on start up automaticaly：起動時に自動で1回実行

この設定は、起動時に自動で1回実行するように設定できます。

設定を変更すると、次回の起動時に反映されます。

この設定は、一定間隔ごとに同期を開始する「自動実行のスケジュール」とは異なります。

Sync On Save (experimental)：保存時に同期

ファイルの保存操作が数秒以内に行われた場合、同期がトリガーされます。

同期は負荷の高い操作である可能性があり、バッテリーに影響を与える場合があるため、ご注意ください。

（変更後、プラグインの再読み込みやObsidianの再起動が必要になる場合があります。）

基本的には手動で保存し、起動時に同期を行いたいという方には以下の設定がおすすめです。

• Schedule for Auto Run : 10min
• Run once on start up automaticaly : sync once after 1 second of start up

まとめ

複数端末でObsidianを使用して、同期させるにはRemotely Saveが非常に便利です。
無料で使用でき、様々なクラウドストレージサービスと連携できる点が魅力です。
設定も比較的簡単なので、ぜひ試してみてください。

Obsidianを複数の端末で同期させることで、いつでもどこでも最新のメモにアクセスできるようになります。
アイデアの管理や情報の整理がさらに効率的にしていきましょう。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

• 簡単にメモを取りたい
• メモを検索したい
• PCとスマホでメモを共有したい

これを解決してくれるのが、Obsidianというメモツールです。

Obsidianは、スマートフォン、パソコン、タブレットで使用でき、拡張機能を使えばデバイス間での同期も可能です。

効率的なメモと整理を実現する強力なツールとして、多くのユーザーに支持されています。

Obsidianの特徴

Obsidianは、マークダウン形式で記述するマークダウンエディタです。

マークダウンとは、簡単な記号を使って文章の構造や装飾を指定できる軽量マークアップ言語です。

Obsidianには次のような特徴があります。

1. 高速なメモ：マークダウン形式を使って素早く構造化されたメモを作成できます。
2. 効率的な情報整理：タグ機能やリンク機能を使って、関連する情報を簡単に結びつけられます。
3. 柔軟な検索：全文検索機能により、必要な情報をすぐに見つけ出せます。
4. グラフビュー：メモ同士のつながりを視覚的に確認できます。
5. デイリーノート：日々の記録を簡単に管理できます。
6. カスタマイズ：プラグインやテーマを使って、自分好みの環境を作れます。

マークダウンの書き方に慣れる必要がありますが、習得すれば通常のメモ帳よりも素早く、自由度の高いメモが可能になります。

インストール方法

以下の手順でObsidianをインストールします。

公式サイトにアクセス

Obsidianの公式サイトにアクセスし、「Get Obsidian」をクリックします。

ダウンロードボタンをクリック

インストールを完了させ、Obsidianを起動する

インストール時の設定はすべてデフォルトのままで問題ありません。

インストールが完了して、Obsidianを起動すると下記のような画面が開かれます。

言語を設定して、クイックスタートをクリック

画面下部のバーで言語を選ぶことができます。

日本語で使用したい場合は日本語を選択し、クイックスタートをクリックします。

そして、次のような画面になれば無事にインストール完了です！

好きなようにメモを作成していきましょう。

コミュニティプラグインを使用することで、Obsidianをさらに使い安くすることができます。

デフォルトでは無効化されているため、最初のインストール時に有効化しておくのがオススメです。

サイドメニューの下にある「設定」から「コミュニティプラグイン」を選択し、「コミュニティプラグインを有効化」をクリックします。

使い方

Obsidianを使用する準備が整ったので、基本的な使い方を紹介します。

新規メモの作成

左サイドバーの「新規ノート」ボタンをクリックします。

新しいメモの名前を入力し、Enterキーを押します。

デイリーノートの作成

左サイドバーの「今日のデイリーノートを開く」ボタンをクリックします。

その日付のノートが自動的に作成されます。

検索

左上の検索バーに検索したいキーワードを入力します。

検索オプションが複数ありますが、次のように使います。

例：「Blog」というフォルダを検索する

path: Blog

例：「調べること」という見出しを検索する

section: 調べること

マークダウンの基本

Obsidianではマークダウン記法という記述方法で文章を記述します。

ここれはメモを作成する際に使用するマークダウンの基本的な書き方を紹介します。

• 見出し：# の数で階層を表現（例：# 見出し1、## 見出し2）
• 箇条書き：- または * の後にスペースを入れる
• 番号付きリスト：1. 2. 3. のように数字とピリオドの後にスペースを入れる
• 太字：**太字にしたい文字**
• 斜体：*斜体にしたい文字*
• リンク：[表示テキスト](URL)

Obsidian独自の記述として下記の記述も覚えておくと、より効率的にメモを作成することができます。

• リンクの作成：[[]]で単語を囲むと、その名前のノートへのリンクが作成されます。（例：[[関連トピック]]）
• タグの使用：#の後にタグ名を入力します。（例：#メモ #アイデア）

まとめ

Obsidianは、マークダウンを活用した強力なメモツールです。

この記事で紹介した以外にもたくさんの機能がありますが、まずは基本的な使い方をマスターしてメモをたくさん取りましょう！

きっと、あなたにとって最適なメモ取りの方法が見つかるはずです。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

本記事では、Windows Terminal、Visual Studio Code、Git、WSL、Ubuntuなどの主要ツールのセットアップ方法を解説します。

プログラミングに多く時間を使うために、サクッと環境構築をしましょう！

環境情報

記事執筆時点（2024年9月3日）での筆者の環境は以下のとおりです。

• OS：Windows HOME
• バージョン：24H2 (OS ビルド 26100.1457)
• Git for Windows：2.46.0
• WSL：2.2.4.0
• Ubuntu：22.04.4 LTS
• Windows Terminal：1.20.11781.0
• Visual Studio Code：1.92.2

環境構築手順

環境構築のおすすめの順番を下にまとめました。

• PowerShell（デフォルトでインストールされていなければ）
• Visual Studio Code
• Git for Windows
• Windows Subsystem for Linux (WSL)
• Ubuntu
• Githubと連携

1. PowerShell

デフォルトでインストールされていると思いますが、もしインストールされていなければ最初にインストールします。

Microsoft Storeからインストールするのが楽なのでおすすめ。

2. Visual Studio Code (VSCode)

コードを Azure に簡単にデプロイするための統合ツールを備えた、強力で軽量な無料コード エディターです。

azure.microsoft.com

VSCodeのインストール

• Visual Studio Code公式サイトからVSCodeをダウンロードしインストール
• インストール時のオプションはデフォルト

拡張機能のインストール

VSCodeには多くの拡張機能がありますが、最低限必要なものは下の2つです。

• Japanese Language Pack for Visual Studio Code
  • VSCodeを日本語化する拡張機能
• WSL
  • WSL環境に接続するために必要な拡張機能

Japanese Language Pack for Visual Studio Code（日本語化パック）

インストールが完了すると右下にポップアップが出てくるので「Change Language and Restart」を押しましょう。

WSL

こちらはインストールするだけでOKです。

3. Git for Windows

Git for Windows は、経験豊富な Git ユーザーと初心者に同様に適切なユーザー インターフェイスを提供しながら、Git SCM の完全な機能セットを Windows に提供する軽量でネイティブのツール セットを提供することに重点を置いています。

https://gitforwindows.org

Git for Windows公式サイトからダウンロードしインストールしますが、面倒な設定を自分で行う必要をなくすために下記の設定をします。

• Select Components
  • Git LFS (Large File Support)
  • Associate .git* configuration files with the default text editor
  • Associate .sh files to be run with Bash
  • Check daily for Git for Windows updates
  • Add a Git Bash Profile to Windows Terminal
  • Scalar (Git add-on to manage large-size repositories)
• Adjusting the name of the initial branch new repositories

4. .gitconfigの設定

.gitconfigファイルは、Gitの動作をカスタマイズするための重要なファイルです。

• ホームディレクトリにある.gitconfigファイルを以下の内容で編集します。

[core]
	editor = \"C:\\Users\\{user}\\AppData\\Local\\Programs\\Microsoft VS Code\\bin\\code\" --wait
[user]
	name = {username}
	email = {email}
[pull]
	ff = only
	rebase = false
[core]
	eol = lf
	ignorecase = false
	quotepath = false
[init]
	defaultBranch = main
[fetch]
	prune = true
[rebase]
	autosquash = true

※{username}、{email}はご自身の情報に置き換えてください

設定した内容を確認したい場合はgit config --list --globalを実行します。

5. Windows Subsystem for Linux (WSL)

Windows の機能である Linux 用 Windows サブシステム (WSL) を使うと、Windows コンピューター上で Linux 環境を実行でき、別の仮想マシンやデュアル ブートは必要ありません。 WSL は、Windows と Linux の両方を同時に使いたい開発者に、シームレスで生産性の高いエクスペリエンスを提供するように設計されています。

microsoft.com

Microsoft公式サイトの導入手順がわかりやすいですが、下記の手順でインストールできます。

• 管理者権限でPowerShellを開く
• wsl --installコマンドを実行（ここで下記Ubuntuもインストールされます）
• PCを再起動

6. Ubuntu

• Ubuntuを起動
• ユーザー名とパスワードを設定
• パッケージの更新とアップグレード：sudo apt update && sudo apt upgrade
• Ubuntuのバージョン確認：lsb_release -a
• 最新のGitをインストール：
  • sudo add-apt-repository ppa:git-core/ppa
  • sudo apt update; sudo apt install git
• UbuntuのホームディレクトリにStep 4と同様の.gitconfigファイルを作成し、以下の内容を書きます。

[user]
	name = {username}
	email = {email}
[pull]
	ff = only
	rebase = false
[core]
	eol = lf
	ignorecase = false
	quotepath = false
[init]
	defaultBranch = main
[fetch]
	prune = true
[rebase]
	autosquash = true
[credential]
	helper = /mnt/c/Program\\ Files/Git/mingw64/bin/git-credential-manager.exe

7. GitHub連携

ここでGit Credential Managerの設定を行うことで、今後GitHubの操作を行う際に認証の手間が省けるようになります。

• デフォルトブラウザでGitHubにサインイン
• git cloneコマンドでGitHub接続をテスト
• Git Credential Managerのプロンプトが表示されたら、ブラウザで認証（下の画像が表示されます）

8. VSCode設定の同期（任意）

VSCodeの設定をクラウドに同期することで、複数のデバイス間で同じ環境を維持できます。

複数端末を使用していて、どの端末でも同じ設定を使いたい方は設定しておくと開発効率が高くなりますよ。

• VSCode左下のアカウントアイコンをクリック
• 「設定の同期をオンにする」を選択
• 同期したい設定項目を選択
• GitHubアカウントを選択して同期

ここまでの長い設定作業お疲れ様でした！これでWindowsにWSL統合を含む開発環境が構築されます！

これにより、WindowsとLinuxのツールを効率的に使い分けることができます。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

アウトプットとしてブログを書いているのですが、コードブロックを使用してもただのテキストとして表示されるのみで色もなく見づらいと感じていました。

console.log("hoge");

console.log("hoge");

上記のコードでは後者が見やすいため、WordPressでコードシンタックスを使用する方法について紹介します。

「Code Block Pro」とは

以下の項目に当てはまるもの、かつユーザー数が多いものがCode Block Proでした。

• 記事執筆時点（2024年8月）も更新されている
• コードの色を自由に決められる
• 行数の表示
• コピーボタンの表示
• 言語名、ディレクトリ名などの表示

WordPressのプラグインから下記のプラグインを検索してインストールします。

「Code Block Pro」の使い方

基本的な使い方

記事の編集画面でブロック一覧からCode Block Proを選択し、コードを貼り付けます。

豆知識

/codeと入力すると、簡単にコードブロックを挿入できます。

ディレクトリ名の付け方

どのディレクトリのコードなのか説明したい場合はコードブロックのヘッダーに設定します。

HEADER TEXTに入力した値がコードブロックのヘッダーに設定されます。

console.log("hoge");

コードシンタックスのカラー変更

Code Block Proはテーマカラーが豊富です。

ブロックのThemeからたくさんのテーマを探すことができます。

console.log("hoge");

console.log("hoge");

console.log("hoge");

まとめ

WordPressの記事にコードを入力するのであれば、Code Block Proを使うことでさらに読みやすい記事にすることができます。

デフォルトのコードブロックを使うようにシンプルに使え、さらにカラーテーマが豊富なのでテーマを眺めるだけでも楽しいので、ぜひチェックしてみてください。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.

技術スタック

T3Appを実行してそのままの環境で開発を行いました。使用している技術スタックは下記のとおりです。

発生したエラー

プロジェクト作成直後のコンポーネントではエラーは発生していませんでした。

DB内のデータを取得、表示するためのコンポーネントを作成したところ、下記のエラーが発生しました。

エラーメッセージを翻訳すると、

「エラー: 初期 UI がサーバー上でレンダリングされたものと一致しないため、ハイドレーションは失敗しました。

」となります。

新たに作成したコンポーネントと、エラーが発生しているコンポーネントのコードは次のようになっていました。

実際のコード

export default async function Home() {
  void api.todo.getAllTodo.prefetch();

  return (
    <HydrateClient>
      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
          <AddTodo />
          <TodoList />
        </div>
      </main>
    </HydrateClient>
  );
}

const TodoList = () => {
  const { data: todoList } = api.todo.getAllTodo.useQuery();

  return (
    <div className="w-full max-w-xs">
      <ul className="flex flex-col gap-2">
        {todoList?.map((todo) => (
          <li
            key={todo.id}
            className="flex items-center justify-between rounded-full bg-white/10 px-4 py-2"
          >
            <span>{todo.title}</span>
            <button className="rounded-full bg-white/10 px-4 py-2 font-semibold transition hover:bg-white/20">
              Delete
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

DBのデータを表示するコンポーネントの準備が終わる前にレンダリングされるため、サーバー側との差異が発生しています。

解決方法

コンポーネントの準備ができたら画面に表示するように修正すれば解決するのですが、2種類の方法があります。

解決方法その2（サーバーコンポーネント側で対処）

プリフェッチをawaitで実行する

//  void await api.todo.getAllTodo.prefetch();
  try {
    await api.todo.getAllTodo.prefetch();
  } catch (error) {
    console.error(error);
  }

解決方法その2（クライアントコンポーネント側で対処）

useSuspenseQueryを使用する

//  const { data: todo } = api.todo.getAllTodo.useQuery();
  const [todoList] = api.todo.getAllTodo.useSuspenseQuery();

クライアントコンポーネント側で対処したほうがエラーハンドリングがしやすく感じたので、私は後者を採用しました。

まとめ

Hydration failedのエラーメッセージが表示された場合は、非同期処理がうまくできているのか確認しましょう。

Copyright © 2025 てっくぶろぐ。 All Rights Reserved.