リストやテーブルの行をドラッグ＆ドロップで並べ替えられるようにするにはjQuery UIやSortableJSを使えば実現できます。
しかし、他のライブラリと相性が悪く他の方法を探していたらHTMLとJavaScriptだけで実現する方法がありましたのでご紹介します。

まずはHTMLで適当なテーブルを用意します。

<table id="data_table">
    <tr>
        <th>columnA</th>
        <th>columnB</th>
        <th>columnC</th>
    </tr>
    <tr id="1" draggable="true">
        <td>row1 value1</td>
        <td>row1 value2</td>
        <td>row1 value3</td>
    </tr>
    <tr id="2" draggable="true">
        <td>row2 value1</td>
        <td>row2 value2</td>
        <td>row2 value3</td>
    </tr>
    <tr id="3" draggable="true">
        <td>row3 value1</td>
        <td>row3 value2</td>
        <td>row3 value3</td>
    </tr>
    <tr id="4" draggable="true">
        <td>row4 value1</td>
        <td>row4 value2</td>
        <td>row4 value3</td>
    </tr>
</table>

表示例

ここでのポイントはtr要素に設定したidとdraggable="true"です。
draggable="true"は要素をドラッグ可能にします。
idは要素を一意なものとして認識するために必要なIDです。
tableに設定したidは対象を特定するために必要なものですので、任意でクラス等にしても問題ありません。

続きを読む…»

ファイルを指定してGit管理対象から除外したいとき

git rm --cached [ファイル名]

--chachedオプションを付けているのはファイルを残したいためです。
このオプションを付けないとファイルごと削除されてしまうので注意してください。

ディレクトリとそれ以下を一括で処理したいときは-rオプションを付ける

git rm --cached -r [ディレクトリ名]

Gitでソース管理しているプロジェクトを開発する中で、間違って必要なブランチを削除してしまったら、もう取り戻せないのでしょうか？
そんなことはありません！ご安心ください。
間違って削除してしまったブランチを復活させる方法がありましたのでご紹介します。

検証環境：git version 2.39.2.windows.1

まずは履歴から該当ブランチの最後のコミットを探します。
Gitの変更履歴を表示するには以下のようなコマンドを実行します。

git reflog

コマンドを実行すると次のように履歴が表示されます。

66ee5fa HEAD@{0}: checkout: moving from mybranch to master
4bba15a HEAD@{1}: commit: commit message
fc11042 HEAD@{2}: checkout: moving from master to mybranch
...

表示された履歴から該当ブランチの最後のコミットを見ると2行目のHEAD@{1}がそれにあたります。
{}の中の数字はログ番号です。

続きを読む…»

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コマンドを使います。

続きを読む…»

プロジェクト毎に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

続きを読む…»