Reactを使い始めて5年くらい経つ。 最近「上手くコンポーネントを使い回すのって人類にはムズいんじゃね？」って思ってきた。 一番ベーシックなコンポーネントといえばボタンが思いつくけど、経験上見た目が同じでも内部での処理が異なるボタンってかなり多い。 AボタンとBボタンを頑張って抽象化したとしても、後からCボタンがやってきて抽象化をやり直したことが何度もある。 めちゃくちゃ簡単に使い回せそうなボタンですら使い回すのがムズいって絶望するわ！！ で、最近は個人開発のときにコンポーネント化するのをやめて愚直にソースコードをコピペしているけど、今のところ別に問題が起きてないんだよなあ…。 むしろどうやって抽象化しようか悩む工程がなくなっている分だけサクサク書けるようになっている気がする。 まあ超小規模な個人開発だから問題が起きていないだけの可能性もあるけどね。 というわけで最近は 長いソースコードを切り分けて読みやすくしたいとき 同じ画面内にデータ部分が違うだけの部品を複数表示したいとき だけコンポーネント化している。 前者はコードが長くなりそうなときに使っていて、これは別に使い回すためにコンポーネント化しているわけではない。 Reactはコード量が増えがちだし、「どのHTMLがどのuseStateと関係あるんだっけ？」みたいなレイアウト部分とデータ部分の結びつきで混乱しがちなので、こういうときはコンポーネント化して、いい感じにソースコードを切り分けて読みやすいコードになるように工夫している。 後者の代表的な例はmapとかで配列を回して複数の要素を表示するようなときだ。例えばテーブルとかリストとか。 テーブルの行が1行目と2行目で仕様が変わることってほぼ無いから抽象化は雑で良いし、将来的に抽象化をやり直す可能性も低い。 こういうときは躊躇なくコンポーネント化している。 個人的に違うページに現れるパッと見似ている要素をコンポーネント化するのは罠だと思っている。高確率でその後に後悔している気がするんだよな。 ただ、ヘッダーとかフッターみたいに全ページで全く同じものを使うことが多い要素についてはコンポーネント化してもあんまり問題が起きないことが多い気がする。 これは例外かなー。 10年後の自分はこの記事を読んでどういう感想を抱くのかね？

やりたいこと VSCodeの『Language Support for Java(TM) by Red Hat』という拡張にはjava.autobuild.enabledというオプションがあり、これはデフォルトでtrueになっている。 つまりVSCodeではjava.project.sourcePathsやjava.project.outputPathやjava.project.referencedLibrariesなどの設定を適切に行っていれば、Javaのコードの保存時に自動でビルドが走る。 ところがGradleを使っているプロジェクトでは自動ビルドが走らなくなる。 試してはいないが恐らくMavenを使っている場合も同様だと思われる。 要するにjavacには対応してくれているが、./gradlew buildには対応してくれていないということなんだろうと思う。 Gradleを使っているプロジェクトでも素のJavaプロジェクト同様に自動ビルドが走るように設定をしていく。 方法 1. Run on Save拡張をインストール Run on Saveという、保存時に指定したコマンドを実行してくれるVSCode拡張があるのでインストールする。 2. settings.jsonを編集 VSCodeの設定ファイルであるsettings.jsonを編集して、コードの保存時に./gradlew buildを実行するように設定する。 .vscode/settings.json { "java.home": "/Users/zurukumo/.jenv/versions/21", "java.import.gradle.java.home": "/Users/zurukumo/.jenv/versions/21", "java.import.gradle.enabled": true, "java.project.sourcePaths": ["src/main/java"], "emeraldwalk.runonsave": { "commands": [ { "match": "\\.java$", "cmd": "JAVA_HOME=/Users/zurukumo/.jenv/versions/21 ./gradlew build" } ] } } "match": "\\.java$"と書くことで、ファイル名が.javaで終わっているファイルの保存時にのみコマンドが実行されるようになる。 ちなみにjava.homeを指定していてもRun on Saveからは読み込まれていないっぽく、仕方がないのでコマンドの前にJAVA_HOME=/Users/zurukumo/.jenv/versions/21と環境変数を記述した。 二重に書いている感じが気持ち悪いが、今の自分の実力ではこれが限界…。 まとめ 絶対にもっと良い方法がある気がする。 もっと良い方法を知っている方はコメントで教えて欲しい。 EclipseとかIntelliJ IDEAとかだったらこんなに面倒なことをしなくても自動でビルドしてくれるんだろうか？

やりたいこと lycheeというRust製のリンク検査ツールがある。 今回はHugoで作成したブログのデッドリンクをlycheeで検出するためのシェルスクリプトを作る。 環境 Hugo 0.146.6 PaperMod (commit 7cf752f8644fea1fc3dc7299352718d492c55182) lychee 0.18.1 lycheeのインストール 詳細は公式のGitHubを参照。 自分はbrewでインストールした。 brew install lychee シェルスクリプト まずは実際に作成したシェルスクリプトを見てみる。 lychee/check.sh #!/bin/bash rm -rf public/ hugo server -p 13131 & HUGO_PID=$! while ! nc -z localhost 13131; do sleep 0.5 done lychee public/ --base="http://localhost:13131" --exclude="amzn.to" --exclude="a.r10.to" kill $HUGO_PID 一行ずつ見ていこう。 1. rm -rf public/ public/ディレクトリを削除する。 Hugoはビルドした結果をpublic/に格納する。 もし記事を削除しても、public/にビルドファイルが残っている可能性がある。 そのような記事はリンク検査の対象にしたくないので、一旦public/を削除してから次のステップ2でもう一度ビルドする。 2. hugo server -p 13131 & ポート13131でHugoのサーバを起動する。このとき同時に再ビルドも行われる。 &をつけることで処理をバックグラウンドで実行することができる。 ...

初めてOSSにコントリビュートした!うれしい!! 概要 tcardgenというHugo用のOGP画像を生成するツールがある。 tcardgenを使ってHugoでOGPを設定するでもこのツールについては紹介した。 実際にこのブログのOGP画像もtcardgenを使って生成している。 tcardgenはデフォルトでタグをタイトルケースに変換する。 Hugo自体もデフォルトでタグをタイトルケースに変換するので、tcardgenはHugoの仕様に合わせたのだと思う。 ただHugoでtagの先頭文字が大文字になるのを回避するでも紹介したように、Hugoにはタグのタイトルケースへの変換を無効化するオプションがある。 Hugoに無効化するオプションがあるのだから、tcardgenに同様のオプションを追加してもさして問題はあるまいと思い、タイトルケースへの変換を無効化するオプションを追加した。 そのPRがこちら。 そしてこのPRが昨日無事にマージされた。 感想 OSSにコントリビュートするのは初めてだったので、結構ドキドキした。 フォークしてPRのベースブランチを指定したりするときに、ミスったらやばいことになるんじゃないかとヒヤヒヤしたが、特に問題なくPR作成までできたので良かった。 GitHub自体は業務でも個人開発でも利用しているが、意外とフォークとかしたこと無かったなと気付かされた。 今回で大体の流れは掴めたので、次回からはもう少しスムーズにコントリビュートできると思う。 あと、自分的には必要な機能だと思って実装したが、他の人からすると無駄な機能だと思われているんじゃないかと不安だった(別に今もこの不安が解消されたわけではない)。 今回はIssueを立ててから一息でPRまで作成したが、とりあえずIssueを作成して作者や他人の反応を見るのもありなのかもしれない。 とにもかくにも無事にマージされてよかった。 自分がよく使うツールにコントリビュートできるってのは気持ちが良いもんですな。

Hugoはデフォルトでコメント機能を持っていない。 公式ドキュメントにはDisqusを使ってコメント機能を実装する方法などが紹介されているが、有料だったり広告が出たりであまり評判は良くないようだ。 色々調べたところIssoというPython製のコメント用サーバを使うことで、無料かつ広告なしでコメント機能を実現できると分かった。 今回はその方法をご紹介。 Issoとは IssoとはPython製のコメントサーバである。 SaaS系のコメントツールと違って自前でサーバを動かす環境を用意するという手間はかかるが、その反面Hugoに限らずあらゆるwebコンテンツにコメント機能を実装することができる。 機能に関してもメールでのコメント通知、連投防止、管理画面など一通りのものは揃っている。 環境 Hugo 0.145.0 PaperMod (commit e2e1011bdecaf84d59c70fa42ff3d2c29c537b65) IssoのDockerイメージ latest(2025-04-16時点) 方法 0. 前提 今回はHugoで作成したブログをhttps://blog.zurukumo.devに、Issoのコメントサーバをhttps://blog-api.zurukumo.devにデプロイすることを想定している。 ブログはVercel上にデプロイし、コメントサーバはさくらのVPSにコンテナデプロイした。 1. Issoでコメントサーバを作成する コメントサーバの構成は以下の通り。 . ├── config │ └── isso.cfg ├── db │ └── comments.db └── docker-compose.yml └── .env config/isso.cfgにIssoの設定を書き、docker-compose.ymlにコンテナの構成を書く。 db/comments.dbはコンテナを立ち上げると自動で作成されるので、用意するのはdbディレクトリだけでOK。 docker-compose.ymlは以下のように書いた。 docker-compose.yml services: isso: image: ghcr.io/isso-comments/isso:latest env_file: .env ports: - "8080:8080" volumes: - ./config:/config - ./db:/db Issoは公式がDockerイメージを配布してくれているので、それを使えば上記のような簡素な設定で問題なく動く。 次にconfig/isso.cfgにIssoの設定を書く。 config/isso.cfg [general] dbpath = /db/comments.db host = https://blog.zurukumo.dev notify = smtp [server] listen = http://localhost:8080/ [moderation] enabled=false [smtp] username = (自分のメールアドレス) password = ${SMTP_PASSWORD} host = smtp.gmail.com port = 587 security = starttls to = (自分のメールアドレス) from = "isso comments" <(自分のメールアドレス)> timeout = 10 [guard] enabled = true ratelimit = 2 direct-reply = 3 reply-to-self = false require-author = false require-email = false [hash] salt = ${HASH_SALT} algorithm = pbkdf2 [admin] enabled = true password = ${ADMIN_PASSWORD} Server Configulationを参考にしながら書いた。 ...

やりたいこと 自分はさくらのVPSを借りて複数のサービスを運営している。 本当なら1つのサービスに対して1台のVPSを契約するのが理想だが、趣味の開発なのでそこまでお金はかけられない。 なので1台のVPS上に複数のコンテナを立ち上げて、nginxのリバースプロキシを使ってアクセスを振り分けるという形式を採用している。 例えばhttps://a.zurukumo.devへのアクセスはコンテナAに、https://b.zurukumo.devへのアクセスはコンテナBに振り分けるというような感じだ。 nginxの設定もSSL証明書の発行も手動で実行していたが、だんだんめんどくさくなってきたので、もっと楽にできる方法がないか調べてみた。 そこで発見したのがnginx-proxyとacme-companionというDockerイメージだった。 この2つのイメージを組み合わせることで、最小限の設定でリバースプロキシの設定からSSL証明書の発行までを自動化することができた。 今回の記事はその方法のご紹介である。 方法 まず、ざっくりとした構成を仮定する。 kagoとnbamashという2つのサービスを運営していて、どちらのサービスもwebコンテナ + dbコンテナという構成である。 両サービスともdocker composeで立ち上げているとする。 ここでhttps://kago-api.zurukumo.devへのアクセスはkagoのwebコンテナに、https://nbamash-api.zurukumo.devへのアクセスはnbamashのwebコンテナに振り分けることを目標にする。 1. DNSに利用したいドメインを登録しておく 向き先はVPSのIPアドレスにする。 自分の場合はこんな感じ(黒塗りの部分は両方同じIPアドレス)。 2. ネットワークを作成する nginx-proxyとacme-companionは動いてるDockerコンテナを検知すると自動でプロキシの設定やSSL証明書の発行を行ってくれる。 動いているコンテナを検知できるようにするるために、nginx-proxyとacme-companionを各種サービスと接続するためのネットワークを作成する。 docker network create proxy 今回はproxyという名前のネットワークを作成したが、名前はご自由に。 3. リバースプロキシ&SSL証明書取得用のdocker-compose.ymlを作成する 公式GitHubのDockerコマンドをdocker-compose.ymlに素直に書き換えた上で、networksの設定だけ追加した。 proxy/docker-compose.yml services: proxy: image: nginxproxy/nginx-proxy ports: - 80:80 - 443:443 volumes: - certs:/etc/nginx/certs - html:/usr/share/nginx/html - /var/run/docker.sock:/tmp/docker.sock:ro networks: - proxy cert: image: nginxproxy/acme-companion volumes_from: - proxy volumes: - acme:/etc/acme.sh - /var/run/docker.sock:/var/run/docker.sock:ro environment: - DEFAULT_EMAIL=(自分のメールアドレス) networks: - proxy volumes: certs: html: acme: networks: proxy: external: true HTTP-01 チャレンジに80番ポートを使用するため、80番ポートを開放している。 ...

転職先の会社ではJavaを使うので、入社前にある程度Springの勉強をしようと思った。 初めはインターネットの情報を見ながらSpringの勉強をしていたが、かなりブラックボックスになっている部分が多いフレームワークだなという印象で、「これは書籍を使って体系的に勉強したほうが効率が良さそうだな」と感じた。 そこで評価が良さげだった『プロになるためのSpring入門』を購入。 #PR プロになるためのSpring入門 - ゼロからの開発力養成講座 楽天 感想 かなり体系的に書かれていてSpringの全体像を把握するのに役立った。 MVCのような基本的な内容からデータベースアクセスの方法、Thymleafの使い方、Spring Securityの使い方のような少し高度な内容まで幅広くカバーされていて、入門書としてはこの一冊で十分事足りるのではないかと思う。 DIコンテナで何が行われているかの解説、Configが読み込まれる仕組みの解説、セッションの管理方法の解説など、フレームワークのブラックボックスになりがちな部分についても丁寧に解説されているのが好印象だった。 フレームワークの裏側を理解せずとも割となんとなくで開発自体はできてしまうものなのだが、裏側を理解しているかいないかでバグにハマってから解決するまでの速度に雲泥の差が生まれると思っているので、本書のように裏側部分も丁寧に解説してくれる技術書はとてもありがたい。 テストについてもかなり丁寧に解説されていて、各種テストの方法からモックの方法やテストデータの作成の方法まで幅広く触れられていた。 本書では二通りの方法で同一の機能を実現できる場合に、「こういう場面ではこういう理由で方法Aを、こういう場面ではこういう理由で方法Bを」というような書き方が頻繁になされていて、選択に迷いがちな初学者にとっては非常にありがたかった。 一方でJavaの文法やWebフレームワークの基礎的な部分などに関しては既知のものとして話が進んでいき、あまり詳細な説明はされなかった。 おそらく本書がターゲットにしている読者は、「ある程度Web開発の経験があって、かつ他の言語からJavaに乗り換えようとしているエンジニア」なのだと思う。 「Web開発初心者です」、「Java初心者です」というような人が初手で手を出す本としては正直少しハードルが高いのかなと思った。 まとめ ある程度Web開発の経験がある人がSpringを学ぶための本としてはかなり優れていると思う。 自分はターゲット層にドンピシャだったので満足度が高かった。

やりたいこと 以下のようにコードブロックと併せてファイル名も表示したい。 test.txt Hello, World! Hugoのデフォルトのコードブロックにはファイル名を表示する機能がない。 また自分の使っているPaperModというテーマでもサポートされていない。 そこで自分でテンプレートを拡張してコードブロックのファイル名を表示できるようにしてみた。 なお、使用しているテーマによっては拡張せずともファイル名を表示できる可能性があるので、まずはそちらの確認をすることをおすすめする。 環境 Hugo 0.145.0 PaperMod (commit e2e1011bdecaf84d59c70fa42ff3d2c29c537b65) テンプレートを作成 公式のGitHubにあるコードを参考にして作成した。 公式のコード 上記のコードではTailwindが使われていたが、自分のテーマではTailwindは使われていなかったので、Tailwindを使わずに.cssファイルを使ってスタイリングをする方式に変更した。 またcopy、details、open、summaryといった将来使わなそうな不要なオプションはメンテが面倒になりそうだったので削除した。 copyに関してはPaperModでコピー機能が実装されているので削除したが、使用しているテーマでコピー機能がサポートされていない場合は採用するのもありだと思う。 というわけで、以下のコードを/layouts/_markup/render-codeblock.htmlとして保存する。 Hugoはコードブロックを見つけるとrender-codeblock.htmlを呼び出すと事前取り決めてあるので、ファイル名も配置場所も一文字でも間違えたらダメなことに注意。 /layouts/_markup/render-codeblock.html {{- /* Forked from https://github.com/gohugoio/hugo/blob/master/docs/layouts/_markup/render-codeblock.html At 2025-04-13 Use .css file instead of Tailwind Deleted copy, details, open, summary params */}} {{/* prettier-ignore-start */}} {{/* Renders a highlighted code block using the given options and attributes. In addition to the options available to the transform.Highlight function, you may also specify the following parameters: @param {string} [file] The file name to display above the rendered code. @returns {template.HTML} {{/* prettier-ignore-end */}} {{- $file := or .Attributes.file "" }} {{- $ext := strings.TrimPrefix "." (path.Ext $file) }} {{- $lang := or .Type $ext "text" }} {{- if in (slice "html" "gotmpl") $lang }} {{- $lang = "go-html-template" }} {{- end }} {{- if eq $lang "md" }} {{- $lang = "text" }} {{- end }} <div class="codeblock-wrapper"> {{- with $file }} <div class="codeblock-file"> {{ . }} </div> {{- end }} <div> {{- transform.Highlight (strings.TrimSpace .Inner) $lang .Options }} </div> </div> CSSファイルを作成 PaperMod用のスタイリングの一例が以下。 ...

大学生の頃、モーニング娘。にハマっていた。 何をきっかけにハマったのかは覚えていないが、おそらくYouTubeでなんかのPVを見たのがきっかけだったんじゃないかと思う。 ハマってからは昔の曲から最近の曲まで色々な曲を聴き漁った。 歴史のあるアイドルグループなので曲数は膨大だったが、暇さえあればずっとモー娘。の曲を聴いていた。 モー娘。が好きだということは周りに公言していたので、何人かの知り合いは「一番好きな曲は何？」と尋ねてくれた。 その質問に対し自分は「『ここにいるぜぇ！』が一番好き」と答えていた。 『ここにいるぜぇ！』はとても良い曲だ。 曲調も歌詞も明るく、PVでもメンバーが元気いっぱいに飛び跳ねていて、それなのにどこか物悲しい雰囲気も感じられて、その雑多な感じが好きだった。 でも、実を言うと『ここにいるぜぇ！』は一番好きな曲ではなく二番目に好きな曲だった。 本当に一番好きな曲は『LOVEマシーン』だった。 Aメロ、Bメロ、サビ、全てのパートがキャッチーで完璧な曲だと思っている。 実際、CMやドラマなどのタイアップが無かったにも関わらずCD175万枚を売り上げたのだから、当時の世間の人達も「この曲良い曲だな」と感じたのだろうと思う。 でも、大学生のときの自分は「一番好きな曲は『LOVEマシーン』です」と答えることができなかった。 サザンオールスターズのファンが「『TSUNAMI』が一番好きです」なんて言うか？ Mr.Childrenのファンが「『Tomorrow never knows』が一番好きです」なんて言うか？ モー娘。のファンが「『LOVEマシーン』が一番好きです」なんて言うか？ ...

問題 AtCoderのサンプルテスト用のCLIを作成している。 一部抜粋したコードが以下。 import subprocess (...中略...) result = subprocess.run( ["python3", f"contests/{args.contest}/{args.problem}.py"], input=input, capture_output=True, text=True, timeout=3, ) timeoutを指定することによって、AtCoderでいうところのTLE(Time Limit Exceeded)を実現している。 タイムアウトしても処理が打ち切られる寸前までの標準出力を使ってデバッグをしたいことがあったので、以下のようなコードを書いて標準出力の中身を取得していた。 しかしこのコードを実行すると標準出力の中身が空になることが何度かあった。 import subprocess (...中略...) try: result = subprocess.run( ["python3", f"contests/{args.contest}/{args.problem}.py"], input=input, capture_output=True, text=True, timeout=3, ) except subprocess.TimeoutExpired as error: print_yellow(f"TLE: Test {i}") print_yellow(error.stdout.decode()) # これがまれにNoneになる 解決策 Pythonの標準出力はコードが終了するかバッファがいっぱいになるまではバッファに溜め込まれてしまう。 つまり出力量が少なく、かつタイムアウトになるようなコードの出力は標準出力にフラッシュされることなく闇に葬られてしまう。 そこで以下のようにバッファに溜め込まないように-uオプションを付けることで解決。 result = subprocess.run( ["python3", "-u", f"contests/{args.contest}/{args.problem}.py"], input=input, capture_output=True, text=True, timeout=3, ) 参考 実際のコード - GitHub