自学
The Lord of the SQLI
クイズ形式で「SQLインジェクション」を学べる、世にも奇妙なサイト。
インジェクションから「守る」側ではなく、インジェクションで「攻撃する」側を体験できる。さながらホワイトハッカー養成講座。
私はフロントエンドエンジニアなので、正直インジェクション攻撃の具体的なやり方まで学習する必要はないのだが、とりあえず「単純な正規表現で入力を弾く」ぐらいのことでは、あの手この手で突破されてしまうのだ、ということが分かった。
プレースホルダー、これ大事。実務で活かす日は来るのかな？
TAKLOG
相変わらず、TAKLOGをコツコツ読んでいる。
ここ1年だけ見ても CSS は大幅に仕様をアップデートしている。:has セレクタ、コンテナクエリ（@container）、subgridなど、以前にはなかった便利な CSS が続々と登場している。最新の情報をキャッチしつづけなければ、いつまでも古い CSS で無駄に冗長なコーディングをすることになりかねない。
職務
Node.js のバージョンアップ
既存サイトの改修で、Node のイメージのバージョンアップをする機会があった。
「DockerHub」という世界中のみんなの共有レポジトリから、イメージをダウンロードしてきて、コンテナを作成して、立ち上げている −−−− という一連の流れがようやく腑に落ちた。
レポジトリ内に「docker/docker-compose.yml」と「.circleci/config.yml」があるとき、両方とも Node のバージョンを書き換えなければいけない、というのも最初のうち理解できず混乱した。ローカル環境で Docker で立ち上げるときのイメージバージョンだけ変えたところで、circleCI でテストする時のイメージバージョンまで一緒に変わるわけではない。それはそれで別に規定されているのだ。
古いソースコードなので、もともとは
node:
docker:
- image: circleci/node:14.16.0
と書いてあったところを、
node:
docker:
- image: cimg/node:20.15.0
と書き換えねばならないのも罠であった。（circleci/ → cimg/）
数年前から「cimg/」に変わったようである。（DockerHub）
TinyMCE を使ったサイトの改修
WYSIWYGツールの「TinyMCE」をつかった既存サイトを改修する機会があった。
そこまで大規模な改修ではなかったが、未知のツールのドキュメントを読んで、あたりをつけながら修正するのは骨が折れる。
chatGPTを使った文言流し込み
10ページ以上ある「お問い合わせガイド」の文言を、全面的に差し替えてほしいという依頼があった。顧客から渡されたWord文書を、既存のHTML（というかPHP）に流し込んでいく作業である。単純にコピペするだけでも大変な作業だが、一部を太字化したり、PHPの国際化タグ（<?= __('xxxx') ?>）で包み込んだりしなくてはならず、手作業でやっていると日が暮れてしまう。
正規表現の置換とかで何とかなるようなケースでもない。Excelファイルならまだ工夫の仕様がある気がするが、Wordでは小技が利かない。一昔前であれば手作業でコツコツやるしかない、地味に大変な作業であった。
「chatGPT にやらせればいいのでは？」という天啓が降りてきて、試してみたところ、手作業の何倍も早い時間で完成させることができた。
（以下 ChatGPT に与えた指令。なお、具体的なソースコードの部分は本物とは少し変え、単純化した構造を示すに留めている。）
まず、docxファイルのテキストに以下の変形を加えてください。
・太字の箇所は <strong></strong>で囲む。
・その後、1行ごとに <?= __('xxxx') ?> というPHPタグで囲む。xxxx の部分に本文を代入する。
・各行の終わりに <br> をつける。これは <?= __('xxxx') ?> の外側に記載する。
・「Q.」から始まる行の末尾には<br>をつけない。
・空の行は「<?= __('') ?><br>」と出力するのではなく、単に改行する。
・「空の行」の1つ前の行の末尾には<br>をつけない。
その後、変換したテキストを以下のテンプレートに従って反復的に出力してください。
##################
{改行}
<details class="faq__item">
<summary class="faq__summary">
<span class="faq__question">{Q.から始まる1行を入力。}</span>
</summary>
<div class="faq__answer">
<p>
{A.から始まる行から、複数行を連続して入力。1行ごとに改行してインデントを揃える。Q.で始まる行の1行前でストップ}
</p>
</div>
</details>
##################
元データを知らないと何のこっちゃであろうが、要は、こんな感じでいい具合の指令を与えてあげれば大量の Word テキストをフォーマットに沿った HTML+PHP に変換することができる。具体的な指示は案件ごとに変わるだろうが、基本的なテクニックは普遍的に利用できるものだろう。
ちなみに、この業務では最初の2割ほどを手作業で行い、その後にChatGPTを使うことを思いついて残り8割に利用した。作業後、同僚にチェックしてもらったのだが、ミスのほとんどは最初の2割に集中しており、残り8割は問題なかった。ヒューマンエラーを無くすという意味でも、この手の単純な作業は ChatGPT に任せるのがよろしかろう。
IntelliJ
会社方針で、テキストエディタを VScode から IntelliJ に移行した。
日本では「IntelliJ」の情報はほとんど出回っていないし（YouTubeで「IntelliJ」と検索すると動画数の少なさに愕然とする）、メジャーな VScode からなぜ移行するのか、意味が理解できなかった。
しかし、しばらく経って使い慣れてくると、意外と便利だった。
- デフォルトで入っているコードの補完機能が優秀。（VScode では任意のプラグインを入れなければ動かないような機能がデフォルトで入っている。）
- Git 機能が優秀。例えば git rebase を GUI ベースで操作できたり。（これも VScode では専用プラグインを入れないといけない。）
- 「編集中のファイル」から、Github でのそのファイルのページにすぐ飛べる。（もしかしたら僕が知らないだけで VScode にも同様の機能があるのかもしれないが....）