Linuxでコマンドによるオペレーションを行う中で便利な機能をご紹介します。

パイプライン

パイプラインは略してパイプとも呼ばれていて「|」のことです。
日本語キーボードでShiftキーを押しながら￥マークのキーを押すと入力される記号です。

パイプラインを使うと最初のコマンドの結果（標準出力）を次のコマンドの入力（標準入力）として渡すことができます。

例えば、CRONデーモンが現在動作しているかどうかを確認する

$ ps aux | grep cron

出力結果

USER         PID %CPU %MEM    VSZ   RSS TTY      STAT START   TIME COMMAND
root        2389  0.0  0.1 224384  2144 ?        Ss   Feb21   0:04 /usr/sbin/crond -n
user     3212367  0.0  0.1 222316  2072 pts/0    S+   06:19   0:00 grep --color=auto cron

以上のようにpsコマンドの出力結果をgrepコマンドに渡し、「cron」という文字列を検索した結果が表示されています。

先頭行は本来表示されませんが、分かりやすくするため表示しています。
先頭行も表示したい場合は次のように入力すると先頭行も表示してくれます。

$ ps aux | grep -E "^USER|cron"

同じようにcatコマンドの出力結果などを検索して表示するのにも役立ちます。

xargs

次にxargsコマンドについてです。
先ほどのパイプラインだけだと最初のコマンドの結果（標準出力）を次のコマンドの入力（標準入力）としてしか渡すことができません。
最初のコマンドの結果（標準出力）を次のコマンドの引数として渡すためにはxargsコマンドを使います。

よく使われるのはfindコマンドとの組み合わせではないでしょうか。

例えば、findコマンドで検索したログファイルを全て削除する

find ./ -name "*.log" | xargs rm -f

findコマンドで検索された結果のファイルリストがrmコマンドに引数として渡されて、該当ファイルが全て削除されるという結果になります。

他に、findで検索したファイルのパーミッションを一括で変更するなど

find ./ -name "*.sh" | xargs chmod 777

以上のようにパイプラインとxargsコマンドをうまく使えば、コマンド操作がはかどるのではないかと思います。

プロジェクト毎にNode.jsのバージョンを管理したいときに便利なツール「fnm(Fast Node Manager)」の導入方法をご紹介します。
他にも同様のツールがありますが、導入のしやすさと定期的にメンテナンスされているという点で「fnm」を選択しました。

Chocolateyをインストール

まずはfnmの導入に必要なパッケージマネージャー「Chocolatey」をインストール
https://chocolatey.org/install

PowerShellを管理者として実行し、以下のコマンドを実行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

インストールできたか確認してみましょう。

choco -v
> 2.4.3

fnmのインストール

早速fnmをインストールしてみます。

choco install fnm -y

プロジェクトごとに指定されたNode.jsのバージョンを使うというPowerShellで実行するコマンドをPowerShellの起動スクリプトに追記します。
起動スクリプトが存在しない場合は新規で作成します。

fnm env --use-on-cd | Out-String | Invoke-Expression

起動スクリプトのパスは$profileと入力すると表示されます。
例）Windows10 PowerShell5.1の場合

> $profile
C:\Users\{username}\Documents\WindowsPowerShell\Microsoft.PowerShell_profile.ps1

正常にインストールが完了したか確認

fnm -V
> fnm 1.38.1

又、wingetというWindowsのパッケージマネージャーを使ってもインストールすることができます。
https://learn.microsoft.com/ja-jp/windows/package-manager/

fnmのインストール

winget install Schniz.fnm

公式サイトにもwinget+fnmを使ったインストール方法が記載されています。2025/03/10時点
https://nodejs.org/ja/download

ただし、Windows PowerShellでwingetコマンドを実行するとターミナルが文字化けしてしまうことがあるようです。

これはwingetを実行している間、フォントが勝手に変更されてしまうことが原因のようです。
予めデフォルトのフォントをMSゴシック以外のフォントに設定しておけば回避できます。

又、Windows Terminalでの実行であればPowerShellでも文字化けしないようです。

https://apps.microsoft.com/detail/9n0dx20hk701?hl=ja-JP&gl=JP

wingetでインストールした場合もPowerShellの起動スクリプトについてはChocolateyでインストールして時と同様の作業が必要です。

続きを読む…»

VSCodeで次のようなスキーマがロードできませんという問題報告が出たときの対処方法メモです。

Problems loading reference 'https://json.schemastore.org/package': Unable to load schema from 'https://json.schemastore.org/package': Downloading schemas is disabled through setting 'json.schemaDownload.enable'.

VSCodeの設定でJSONと検索するとJSON › Schema Download: Enableという設定があるので、こちらにチェックを入れて有効にします。
もしくはsettings.jsonに以下のように追加します。

{
    "json.schemaDownload.enable": true,
}

CSSのnth-child・nth-of-type等の擬似要素を使えば兄弟要素の何番目の要素に対してのみスタイルを適用する等、理解して使えば柔軟なスタイル設定が可能です。
自身の備忘録のためにも書き留めておきたいと思います。

:first-child, :first-of-type

兄弟要素のうち最初の要素を指定します。
■□□□□□□□□□□

:last-child, :last-of-type

兄弟要素のうち最後の要素を指定します。
□□□□□□□□□□■

:nth-child(A), :nth-of-type(A)

兄弟要素のうちA番目の要素を指定します。
□□■□□□□□□□□

:nth-last-child(n), :nth-last-of-type(n)

兄弟要素のうち最後からn番目の要素を指定します。
□□□□□□□□■□□

:nth-child(-n+A), :nth-of-type(-n+A)

兄弟要素のうち先頭からA個の要素を指定します。
■■■□□□□□□□□

:nth-child(n+A), :nth-of-type(n+A)

続きを読む…»

WordPressのメニューを表示する際、wp_nav_menuメソッドを使って表示することがあると思います。
その際の例

wp_nav_menu( array( 'menu' => 'GlobalMenu', 'menu_id' => 'global_navi', 'container_class' => 'global_navigation' ) );

wp_nav_menuではidやクラス等、ある程度はパラメータを与えることでカスタマイズ出来るようになっています。
しかし、例えばメニューアイテムの最後に任意のアイテムを追加で表示させたいなど、柔軟なカスタマイズをすることが出来ません。

そんな柔軟なカスタマイズを行いたいときの手法をご紹介します。

順に解説していきますが、実際には一連の処理をfunctions.phpにカスタムメソッドとして作成し、メニューを表示したい任意の箇所で実行してください。

解説

メニュー名を指定し、wp_get_nav_menu_objectメソッドでメニュー情報を取得します。
※メニュー名は[外観]->[メニュー]->[メニュー構造]で設定しているメニュー名を指定してください。

// メニュー名
$menu_name = 'GlobalMenu';
// メニュー情報取得
$menu = wp_get_nav_menu_object($menu_name);

取得したメニュー情報を基にメニューアイテムを取得します。

// メニューアイテム取得
$menu_items = wp_get_nav_menu_items($menu->term_id);

取得したメニューアイテムの情報にCSSクラスの情報がありますが、この段階では[外観]->[メニュー]->[メニュー構造]の各項目で設定したCSS class(オプション)で指定したクラスしか設定されていません。
wp_nav_menuでメニューを表示したときはWordPressが自動的に設定してくれているクラスが含まれています。
そのクラスも含めて設定して欲しいときは_wp_menu_item_classes_by_contextメソッドを実行し、本来wp_nav_menuでなら適用されるクラスを反映させます。
但し、このメソッドは公式ガイドにはプライベートだと書かれておりテーマ開発者の実行を想定していないそうなので、今後使えなくなったりする可能性はあります。

// 自動で割り当てられるWP独自クラスを反映させる
_wp_menu_item_classes_by_context($menu_items);

続いてdiv等でラッピングしつつ、リストを作成していきます。

echo '<div class="global_navigation">';
echo '<ul id="global_navi" class="menu">';

又、先ほど実行した_wp_menu_item_classes_by_contextだけではmenu-item-メニューIDクラスが追加されていないので、こちらは手動で追加します。

// クラス用配列
$current_classes = [];

ループでメニューアイテムを取り出していきます。

foreach ( (array) $menu_items as $key => $menu_item ) {

    // クラス用配列にmenu-item-メニューIDを追加
    $current_classes = array_merge($menu_item->classes, ['menu-item-'.$menu_item->ID]);

    echo '<li class="' . implode(' ', $current_classes) . '">';
    echo '<a href="' . $menu_item->url . '"' . (($menu_item->current) ? ' aria-current="page"' : '') . '>' . $menu_item->title . '</a>';
    echo '</li>';
}

ループでメニューアイテムの取り出しが一通り終わったところで、追加アイテムを書き出します。

echo '<li>追加メニューアイテム</li>';

最後にHTMLタグを閉じます。

echo '</ul>';
echo '</div>';

以上でカスタマイズしたメニューを表示することが出来ます。

wp_get_nav_menu_object() – Function | Developer.WordPress.org
_wp_menu_item_classes_by_context() – Function | Developer.WordPress.org