更新日:
投稿日:

さて、世の中ではAI開発全盛期という感じで、とにもかくにも全盛期という感じになってきているので、今回は私自身の活用状況について書いていく。

あらかじめ断りを書いておくと、世の中の人ほど活用できてはいない。

今のところは簡単なツール作りや、実装の部品作りといった、小規模用途に利用していて、開発工数の圧縮には便利だと感じている。

開発でLLMを使ってみた事例

仕事ではなく趣味の開発の話。

事例1:MarkdownをYAMLに変換するスクリプトの作成

私は職務経歴書をWordで作っているのだが、WordそのままだとLLMに読ませるのはしんどい。

そこでLLMに読ませる形にしたいが、Markdownはそこまで構造的ではない。なのでYAMLにすることにした。

単刀直入にやるならWordファイルの中身をLLMに渡し、「これをYAMLにしてください」というのが恐らく一般的で、最も手っ取り早いだろう。

しかし私はそれを避けた。私の経歴書はかなり長く、LLMがどこかでミスをしていた場合、それをレビューするのは至難の業だからだ。例えば経歴の一部がLLMによって書き換えられていたりするリスクは拭えない。

なので私はLLMにWordファイルから切り出したプレーンテキストをYAMLに変換するスクリプトを書くことを依頼した。これであればレビューするのはコードそのもので良いし、静的コードは基本的に文脈を見て判断して勝手に書き換えることはしないし、仮にそんな処理があったとしてもそんなものはコードを見ればわかるからだ。

作らせたのはSESや受託系の経歴書にありがちな、死ぬほど繰り返される案件ごとの経験セクションだ。職務経歴書の中でも職務要約だとか、活かせる経験みたいな単純な文章セクションは手作業でどうにもなるので、そこは手で移植すればいいが、繰り返しはしんどい。

というわけで次のようなものを書いてもらった。これで9割はうまく変換してくれたし、後はざっと目検して行って変換にしくじっている部分を直して対応した。

要はLLMに変換させるのではなく、LLMに変換ツールを作らせると間違いが少ないという話だ。

#!/usr/bin/env perl
use strict;
use warnings;
use utf8;
binmode(STDIN, ':utf8');
binmode(STDOUT, ':utf8');

my $input = do { local $/; <STDIN> };

# 複数のプロジェクトを分割(日付パターンで分割)
my @projects = split(/(?=\d{4}\/\d{2}\s*-\s*\d{4}\/\d{2})/, $input);

print "projects:\n";

for my $project (@projects) {
    next if $project =~ /^\s*$/;

    parse_project($project);
}

sub parse_project {
    my ($text) = @_;

    # 時期を抽出
    my ($period) = $text =~ /^(\d{4}\/\d{2}\s*-\s*\d{4}\/\d{2})/m;
    return unless $period;

    # タイトル(時期の後の行)
    my ($title) = $text =~ /^\d{4}\/\d{2}\s*-\s*\d{4}\/\d{2}\s*\n(.+?)(?:\t|規模|$)/m;
    $title //= '';
    $title =~ s/^\s+|\s+$//g;

    # 要員数
    my ($members) = $text =~ /要員数\s*\t?\s*(\d+名)/;
    $members //= '';

    # 役割
    my ($role) = $text =~ /役割\s*\t?\s*([^\t\n]+)/;
    $role //= '';
    $role =~ s/^\s+|\s+$//g;

    # プロジェクト概要
    my ($overview) = $text =~ /【プロジェクト概要】\s*\n(.*?)(?=\n\s*\n|\n【|$)/s;
    $overview //= '';
    $overview =~ s/^\s+|\s+$//g;
    $overview =~ s/\n\s*/\n/g;

    # 主な業務
    my ($tasks) = $text =~ /【主な業務】\s*\n(.*?)(?=\n\s*\n|\n【|$)/s;
    $tasks //= '';
    $tasks =~ s/^\s+|\s+$//g;

    # 実績・取り組み
    my ($achievements_text) = $text =~ /【実績・取り組み】\s*\n(.*?)(?=\t要員数|\n開発環境|$)/s;
    $achievements_text //= '';

    # 開発環境セクションを抽出
    my ($dev_env_text) = $text =~ /開発環境\s*\n(.*?)$/s;
    $dev_env_text //= '';

    # 出力
    print "      - 時期: $period\n";
    print "        内容: $title\n";
    print "        要員数: $members\n";
    print "        役割: $role\n";

    # プロジェクト概要
    print "        プロジェクト概要: |-\n";
    for my $line (split /\n/, $overview) {
        print "          $line\n" if $line =~ /\S/;
    }

    # 主な業務
    print "        主な業務:\n";
    print "          - $tasks\n";

    # 実績・取り組み
    print "        実績・取り組み:\n";
    parse_achievements($achievements_text);

    # 開発環境
    print "        開発環境:\n";
    parse_dev_env($dev_env_text);
}

sub parse_achievements {
    my ($text) = @_;

    # 実績項目をパース(タイトル + 説明の形式)
    my @items;
    my $current_title = '';
    my $current_desc = '';

    for my $line (split /\n/, $text) {
        $line =~ s/^\s+|\s+$//g;
        next if $line eq '';

        # 新しい項目タイトル(短い行で次の行に説明がある)
        if ($line =~ /^(.+?)$/ && length($line) < 30 && $line !~ /。$/) {
            if ($current_title) {
                push @items, { title => $current_title, desc => $current_desc };
            }
            $current_title = $line;
            $current_desc = '';
        } else {
            $current_desc .= ($current_desc ? "\n" : '') . $line;
        }
    }

    if ($current_title) {
        push @items, { title => $current_title, desc => $current_desc };
    }

    for my $item (@items) {
        print "          - $item->{title}: |-\n";
        for my $desc_line (split /\n/, $item->{desc}) {
            print "              $desc_line\n" if $desc_line =~ /\S/;
        }
    }
}

sub parse_dev_env {
    my ($text) = @_;

    my %sections;
    my $current_section = '';

    for my $line (split /\n/, $text) {
        $line =~ s/^\s+|\s+$//g;
        next if $line eq '';

        if ($line =~ /^【(.+?)】$/) {
            $current_section = $1;
            $sections{$current_section} = [];
        } elsif ($current_section) {
            # カンマやスペースで分割し、バージョン番号を除去
            my @items = split /,\s*/, $line;
            for my $item (@items) {
                $item =~ s/^\s+|\s+$//g;
                # バージョン番号を除去(数字とドットのパターン)
                $item =~ s/\s*[\d.]+\s*$//;
                $item =~ s/\s+\d+(\.\d+)*$//;
                push @{$sections{$current_section}}, $item if $item =~ /\S/;
            }
        }
    }

    # 順序を維持して出力
    my @section_order = ('言語・FW', 'インフラ', 'ドキュメント', 'CI/CD', 'VCS');

    for my $section (@section_order) {
        next unless exists $sections{$section};
        print "          $section:\n";
        for my $item (@{$sections{$section}}) {
            print "            - $item\n";
        }
    }

    # 定義順以外のセクションも出力
    for my $section (keys %sections) {
        next if grep { $_ eq $section } @section_order;
        print "          $section:\n";
        for my $item (@{$sections{$section}}) {
            print "            - $item\n";
        }
    }
}

入力に使ったワードファイルのフォーマットは以下のような内容だ。

[企業情報A]
[案件情報1]
[案件情報2]
...
[企業情報B]
[案件情報1]
[案件情報2]
...

ツールの想定漏れにより一部手修正しているが、低いレビューコストと最低限の手作業で完遂でき、LLMに読ませて分析させられる経歴書を作れたので、結果としてこれはよかった。

事例2:adiaryのMarkdownパーサーへの脚注記法の追加

これは重い腰を上げてadiaryのMarkdownパーサーを脚注記法に対応させたでも書いた内容だ。

端的に言うと既存コードを読ませて部品程度の機能を書いてもらった。

そのまま愚直に書いてもうまく動かなったので、結合する部位などは適当に手直ししているが、これもLLMを使ったコーディングが役に立った一例だ。

ローカルLLMの利用状況

現状ではベンチマークを取るくらいしか出来ていないが、試したことを書き留めておく。

Ollamaからllama.cppに乗り換えようとして失敗した話

Ollamaよりllama.cppの方がCPUオフロードなどのチューニングができるので20〜100%程度のパフォーマンス向上が望めるみたいな情報も見かけたが、GitHubのCUDA対応バイナリを単に叩くだけではパフォーマンスが著しく劣化し、Reasoningの影響で、ただでさえ遅いのが余計に遅くなるなど、全く使い物にならなかった。

調べたところ-nglオプションでGPUオフロードを指定したり、--reasoning-budget 0を付加することでReasoningを防げるらしいがReasoningを防げるかどうかはモデルに依存するらしく上手く行かなかったし、-nglオプションも適切な値が謎だったので諦めた(コンテキストトークン長で変わるらしいが計算ツールがWindowsだとハングしたので調べられなかった)

llama.cppは元々mac用に開発されていてCPUオフロードが標準らしいのでWindowsで使うのは結構大変なのかもしれない。

Ollamaの動きを観察していた感じ、なんかいい感じにCPUオフロードとGPUオフロードを按分してくれてるように見えたので、Ollamaでも別に構わない気はした。

それとCPUに全部オフロードしても実用性は薄いが、それなりの速度で生成してくれるのが分かったのは収穫だった。

もし過去にこれを知っていればメモリ高騰前に128GBにしておきたかったと後悔した。何せ去年の8月に5万だったDDR5の32GBメモリ二枚組が、今や22万と、四倍以上も値上がりしていて、もはや手の出しようがない。

ああ、去年DDR4からDDR5に上げるときに64GBを維持せず、いつものように意味もなくメモリを盛っていれば…。

ローカルLLMの活用方法が見えない

たぶんLLMをチューニングする知識がないとどうにもならなさそう。RAGとかMCPとかLoraを自作できれば夢があるのかも?

30b程度のモテルだとClaude Opus 4.5の足元にも及ばないので、多分何かに特化させないと使いみちはないと思う。

PoeでGLM-7を試した感じ体感そこそこ使える気がしたので120b辺りなら実用性が期待できそうだが、これをまともに動かすにはNVIDIA RTX PRO 6000 Blackwellが必要らしく、こいつは140万円もするし、GMKtec EVO-X2 GMKtec EVO-X2でも実用速度で動くらしいが、LLM以外に使いみちのない端末のために貴重な電源と部屋のスペースを取られるのも困りものなので乗り気にはなれない。

まとめ

現状そこまでバチバチに使えているかといわれると、そこまで使えていないのが正直なところだとは思う。

例えばサブエージェントやスキルといったものや、MCP、RAG、ファインチューニング、Loraといったものは活用できていない。

まぁ徐々に使えるようになっていければいいのかなぁというところで、程々にやっていきたい。

ローカルLLMはまたなんかいい感じの情報が出たら試したい。Poeの利用料金もタダではないので…。

投稿日:

既存CGIを一切触らずに、前段にアクセス制御やアクセスロガーをつけたいとかの用途でラッパーCGIを使うと上手くいくので、その方法を書く。

なお前段が動くことしか試していないが、備考に後段で処理をさせる方法についても軽く触れている。

動作機序

CGIはコマンドライン引数、環境変数、標準入力を受け取り、何かを処理した結果を標準出力するプログラムである。

つまりラッパーCGIはコマンドライン引数、環境変数、標準入力を受け取り、それをラッピングするCGIにそのまま受け渡し、このCGIの標準出力をリダイレクトできればよい。

やり方

以下のようなコードを書き、exec()前に前段の処理を書けばよい。

#!/usr/bin/perl
use strict;
use warnings;

#
# ここに実行前に挟みたい処理
#

my $original_cgi = './hoge.cgi';
exec($original_cgi) or die "Cannot exec $original_cgi: $!";

今回実際に作ったサンプル

adiaryにはアクセス制限をする機能がなく、本体を弄るのが嫌だったので前段に処理を入れることで実現した。

#!/usr/bin/perl
use strict;
use warnings;

# 以下のコマンドでIP::Geolocation::MMDBをインストールしていることが前提
# cpanm -l extlib IP::Geolocation::MMDB
use lib './extlib/lib/perl5';
use IP::Geolocation::MMDB;
# https://download.db-ip.com/free/dbip-city-lite-YYYY-MM.mmdb.gz
# ex. https://download.db-ip.com/free/dbip-city-lite-2026-01.mmdb.gz
my $db = IP::Geolocation::MMDB->new(file => './DBIP-City.mmdb');
my $country_code = $db->getcc($ENV{REMOTE_ADDR});

# 日台韓は許可する方針(怪しい挙動を見たことがないため)
my @allow_country_codes = ('JP', 'TW', 'KR');

my $user_agent = $ENV{HTTP_USER_AGENT};

# 許可する国コードかチェック
my $is_allowed_country = grep { $_ eq $country_code } @allow_country_codes;

# 許可するBOTのUAパターン
my @allowed_bot_patterns = (
    qr/bot/i,
    qr/curl/i,
    qr/wget/i,
    qr/google/i,
    qr/bing/i,
    qr/mastodon/i,
    qr/misskey/i,
    qr/pleroma/i,
    qr/akkoma/i,
    qr/lemmy/i,
    qr/activitypub/i,
    qr/hatena/i,
    qr/github/i,
    qr/tumblr/i,
    qr/meta/i
);

# 許可するBOTかチェック
my $is_allowed_bot = 0;
for my $pattern (@allowed_bot_patterns) {
    if ($user_agent =~ $pattern) {
        $is_allowed_bot = 1;
        last;
    }
}

# 許可国でもなく、許可BOTでもなければエラーにする
if (!$is_allowed_country && !$is_allowed_bot) {
    # 未知のSNS BOTを将来的に許可するために、BOTくさいUAのログを集めておく
    if ($user_agent !~ /Windows|Mac OS|Linux|Android|iOS|iPhone|iPad/i) {
        # OGP取得BOTに間違いなく含まれない文字列が入ってるものはログに入れない
        my $deny_ua_log_file = './deny_ua.log';
        if (open my $fh, '>>', $deny_ua_log_file) {
           my $time = localtime();
           my $remote = $ENV{REMOTE_ADDR} // 'unknown';
           my $uri = $ENV{REQUEST_URI} // 'unknown';
           print $fh "[$time]\t\"$user_agent\"\t$country_code\t$remote\t$uri\n";
           close $fh;
        }
    }

    print "Status: 403 Forbidden\n";
    print "Content-Type: text/plain; charset=UTF-8\n\n";
    print "Access denied.\n";
    exit;
}

# adiary呼び出し
my $original_cgi = './adiary.cgi';
exec($original_cgi) or die "Cannot exec $original_cgi: $!";

備考

perldocを読んだ感じ、互換性に問題が出る可能性も少なからずあるようだ。

perldocのexec関数の説明を見る感じ、ENDブロックや、オブジェクトのDESTROYメソッドを起動しないとあるので、実装方法次第では正しく動かない可能性もあるのかもしれない。

また「戻って欲しい場合には、execではなく system関数を使ってください」とあるため、もし後処理をしたい場合はexec関数でなくsystem関数を使うとよいと思う。

あとがき

レンタルサーバーではWAFが自由に使えないため、なんちゃってWAFの様なものを作りたいとか、レンタルサーバーを新規に始めたく、CGIにバナー広告を差し込みたいといったケースがある場合に、今回のような手法は便利だろう。

今時、往年のレンタルサーバーを新規に始め、それもバナー広告を出したいと考える人物がいるかどうかは謎だが、共通的に何かを差し込みたいなど、何かしら活用方法はあるかもしれない。

ググって出てきた記事が軒並み古くて役に立たなかったので、令和八年最新版として書いておく。

やり方

  1. CPANMのインストール
    curl -L https://cpanmin.us | perl - App::cpanminus
    
  2. CPANMのパスを.cshrcに書く
    私はZSHを使っているため.zshrcに書いているが、デフォルト環境はcshのはずなので.cshrcに書けば成り立つと思う。
    echo PATH=${HOME}/perl5/bin:${PATH}
    
  3. local::libをインストールする
    local::libはroot以外にあるCPANモジュールを使うためのものらしい。これを自分のホームディレクトリ配下に入れるようにコマンドを流す。
    cpanm --local-lib=~/perl5 local::lib && eval $(perl -I ~/perl5/lib/perl5/ -Mlocal::lib)
    

使い方

以下のようなコマンドを流すとパスを指定してCPANモジュールを取得・展開できる。

# 書式
cpanm -l <パス> <モジュール名>

例えば以下を流すとpwd配下にextlibディレクトリが生成され、IP::Geolocation::MMDBがダウンロードされて展開される。勿論、依存関係も勝手に解決してくれる。

cpanm -l extlib IP::Geolocation::MMDB

モジュールを利用するときはライブラリの配置されているルートを指定し、次にモジュール名を指定するとうまくいくようだ。

use lib './extlib/lib/perl5';
use IP::Geolocation::MMDB;

あとがき

https://cpanmin.us/を見に行くと以下の記述があり、辿ってみると日本の人が作っていてちょっと驚いた。

# This is a pre-compiled source code for the cpanm (cpanminus) program.
# For more details about how to install cpanm, go to the following URL:
#
# https://github.com/miyagawa/cpanminus
投稿日:

今までLLMを使う場合、文書校正や整理、ERP辺りが多かったが、そろそろコード作成にも必要だなと感じたので取り組んでみた結果の初回の雑感。

Claude Opus 4との直接対話

LLMエージェントを使わない、チャットインターフェースでの直接対話で行ってみたこと。これはClaude Opus 4で行っている。

簡単なボイラープレートやプログラムが関の山

正直、LLMとの単純な対話で作れるのは3カラムのハンバーガーメニュー付きのような画面のボイラープレートや、WebでJSを使った画像判定スクリプトあたりが関の山だと感じている。

それ以上のものも作れる可能性はあるが、要件定義とコードレビューが大変なので厳しい気がしている。

プログラムの変換は苦手

まず私はTampermonkeyで5分ごとにAPIをポーリングし、結果をパースして条件に応じてOSに通知トーストを出す、400行ほどのスクリプトを作っている。

そこで、このソースコードを丸っと渡して、C#.NETに変換してほしいと頼んでみたが、これは失敗した。根本的にビルドが通らないコードが出てきて多少の修正でどうにかなるレベルでもなく、全くダメだった。

ファイル構成もよくなく、ModelやControllerレベルではファイル分割されているものの、1ファイルの中に複数クラスが納められていたり、何ともな結果だった。

TSDocを書いているため、上手く推論できればInterfaceやClassも作れると思ったが、これは難しいようだった。

特定の設定方法を書くのは得意

OpenWrtの特定の設定を書かせることは得意だった。これはそのまま適用できた。やはりスコープが限定されているのが得意だと感じた。

Claude Codeを少しつついてみた感想

ファイル保存などの手間がいらなくなる

当たり前だがローカルマシン上に結果を出力するため、チャットインターフェースのように頑張ってファイルを保存したり、ディレクトリを切る必要は全くなくなる。

ボイラープレートの作成は得意

PHPを利用したMVC構成で簡単なブログをフルスクラッチで作ってほしいといえば、それらしい形のものは出してくれた。

動くかどうかは全く試していないが、大まかなスケルトンを作って貰って、そっからいじっていくベースとしては使えるような気がした。

やっぱりプログラムの変換は苦手

adiaryのテンプレートエンジン部分をPHPに書き換えてほしいと依頼してみたが、やはり動かないものが出てきた。adiaryの設計が極めて複雑でコンテキストが読み取りづらいのはあると思うが、やはりこの手の作業は苦手なようだ。

現状で見えてきたこと

そこまで大して使ったわけではないが、とりあえず所感として。

恐らく小規模でコンテキストの薄いコードを書かせるのが筋がよさそう。これは複雑な要件をLLMに伝えるのは難しいし、考えるのも大変なのと、コード変換も400行レベルでも厳しいと感じたからだ。

つまり、既存システムの移行は苦手なのではないかと思っている。なのでWordPressをGoで作り直すみたいなことは相当難しいと思う。逆にSOLID原則やClean Architectureのような、スコープが狭く責務が明確なものは作りやすいのではないかと感じた。

また仮にLLMが全て書いてくれるとしても、人がレビューしないとバグがあった時に当たりをつけるのが大変とか、知らない仕様が紛れ込んだりとかもあるため、LLMに書かせすぎるべきではなく、あくまで補助ツール程度に留めておくのが良いと考えている。

LLMの制約を味方にする開発術という記事を見た感じ、複雑なタスクを段階的に分解し、LLMの処理可能な単位に分解することが重要だと感じている。つまりこれは疎結合のほうが向いているということだ。また標準化されていて、属人性がないコードのほうが制約が少なくなるので、LLMもやりやすくなるだろう。これは標準化されておらず、属人性が高いコードは往々にしてカオスで、判断軸がなく、LLMの思考がぶれるからだと思われる。

結局どうしていくか

正直まだどう実用化していくかの展望は見えていない。

何はともあれ使い続けていくことが大切な気はしているので、個人的にはClaude Codeを使い続けていきたい。少なくとも面倒なボイラープレートを書く部分については非常に優秀なので、大まかに作らせて微調整するみたいな用途では間違いなく活路がある。こういうのは引き出しが多ければ多いほど活用できるだろうから、基礎を忘れないように自学していくことも引き続き重要で、LLMに教えてもらうのもいいだろう。適切に使えばLLMからは多くの学びを得られる。

投稿日:

自動生成されたHTMLから社員情報を引っこ抜くスクリプトを作った時に考えたことを書き出してみる。ブラウザのDevToolsを使った簡易ツールを書いていて、頭に浮かんだことだ。データやコードは架空の内容なので実在しない。

ベースのHTML

大まかに最初に目に入ってきたのはこんな内容だった。機械生成されているせいかフォーマットがガタガタ気味だ。

<span class="Content">
    <span id="undefined">SHAIN.XLS page1</span>
</span>
<span class="Content">
    <br>
    <span id="undefined">社員リスト</span>
    <span id="undefined"></span>
</span>
<span class="Content">
    <br>
    <span id="hoge1">00001</span>
    <span id="fuga1">:山菱喜一</span>
</span>
<span class="Content">
    <br>
    <span id="hoge2">00002</span>
    <span id="fuga2">:鈴木与一</span>
</span>
<span class="Content">
    <br>
    <span id="hoge3">00011</span>
    <span id="fuga3">:茨城妙子</span>
</span>
<span class="Content">
    <span id="undefined">SHAIN.XLS</span>
    <span id="undefined"> page2</span>
</span>
<span class="Content">
    <br>
    <span id="hoge4">00012</span>
    <span id="fuga4">:奈良楓</span>
</span>
...

まずは関数ベースで考える

ひとまず普段は関数ベースで実装しているので関数ベースで実装する。書いていてgetEmployee(name, list)の仮引数にあるlistは冗長ではないかということに気づく。

const emp_list = document.getElementsByClassName('Content');
[...emp_list].reduce((acc, cur) => {
  if (cur.id === 'undefined' || cur.children.length !== 3) {
    return acc;
  } else {
    const id = cur.children[1].innerText;
    const name = cur.children[2].innerText.replace(/^:/, '');
    if (/^\d+$/.test(id)) {
      acc.push({ id, name });
    }

    return acc;
  }
}, []);

const getEmployee = (name, list) => {
  const re = new RegExp(`.*${name}.*`);
  const result = list.filter((emp) => re.test(emp));
  console.log(result);
};

クラスにしてみる

そしてクラスにしたほうが素直にならないかと考え、クラスにしてみた。getEmployee(name, list)search(name)となり、冗長性が減ったほか、抽象的な表現で分かりやすくなった気がする。

class EmployeeSearch {
  constructor() {
    const emp_list = document.getElementsByClassName('Content');
    this.list = [...emp_list].reduce((acc, cur) => {
      if (cur.id === 'undefined' || cur.children.length !== 3) {
        return acc;
      } else {
        const id = cur.children[1].innerText;
        const name = cur.children[2].innerText.replace(/^:/, '');
        if (/^\d+$/.test(id)) {
          acc.push({ id, name });
        }

        return acc;
      }
    }, []);
  }

  search(name) {
    const re = new RegExp(`.*${name}.*`);
    const result = this.list.filter((emp) => re.test(emp.name));
    console.log(result);
  }
}

追加仕様に合わせ関数を新設し、クラスを改良する

動作確認をしていく中で表示と名前が分かれたパターンを発見したので、これに合わせて直してゆく。

<span class="Content">
    <br>
    <span id="hoge2">00002</span>
    <span id="fuga2">:飯田</span>
    <span id="piyo2">太郎</span>
</span>

この対応をしようとすると分岐が必要だと考えたが、愚直にやってしまうとコンストラクタの中がごちゃつく上、テストもしづらいと考え、DOMをパースする処理を外部関数に切り出し、それを呼ぶことにした。

const getEmployeeFromList = (domList) => {
  const id = domList[1].innerText;
  const name1 = domList[2].innerText.replace(/^:/, '');
  if (domList.length === 3) {
    return {
      id,
      name: name1
    }
  } else {
    const name2 = domList[3].innerText;
    return {
      id,
      name: `${name1}${name2}`
    }
  }
};

class EmployeeSearch {
  constructor() {
    const emp_list = document.getElementsByClassName('Content');
    this.list = [...emp_list].reduce((acc, cur) => {
      if (cur.id === 'undefined' || cur.children.length < 3) {
        return acc;
      } else {
        const { id, name } = getEmployeeFromList(cur.children);
        if (/^\d+$/.test(id)) {
          acc.push({ id, name });
        }

        return acc;
      }
    }, []);
  }


  search(name) {
    const re = new RegExp(`.*${name}.*`);
    const result = this.list.filter((emp) => re.test(emp.name));
    console.log(result);
  }
}

更により良くするには?

ブラウザのDevToolsにあるConsoleで書いたコードなので、現実問題テストコードも書かないし、そこまで凝る必要もないのが、よりよい設計にするにはコンストラクタでパースせず、事前にパース処理した結果をコンストラクタを通じて注入して処理するようにするとよいだろう。そうすると責務が分離され、テストがしやすく、コードもきれいになると考える。

クラスにするか、関数にするか

これはまだ正直答えが見えていないが、インスタンスを引き回す場合はクラスのほうが都合がいい可能性がある気がしてきている。

関数でもできるにはできるが、毎回引数にインスタンス相当のものを渡すのは冗長である可能性がある。疎結合という文脈では関数のほうがより良い可能性もあるが、人間の認知負荷や、保守性との兼ね合いだと思う。

明確な損益分岐点はまだ見えていないし、今回のケースだと割とどっちでもいい部分もあるとは思う。