抱負 -2026-

昨年の振り返りとにかく一瞬だった2025年が終わりました。地元に帰りフロントエンドとして働き始めて4年弱ほどになろうとしています。今年も勉強や最新技術のキャッチアップもしつつ、淡々と仕事をしていたらあっという間に過ぎていました。AIによるバイブコーディングなど、コードの書き方が根本から変わるような大きな変化の真っただ中にいるのが印象的な一年だったと感じています。この業界の変化は激しいですが、私個人の仕事にはとくに大きな変化はなく、AIエージェントととにかく壁打ちをして公式のドキュメントなどで答え合わせをしながらスピーディに対応していく、といった感じでした。ただ4年も仕事を続けていると、徐々に仕事にも慣れ、後輩も増えてきます。自分のコードだけに集中していればよかった時から、質問され、他人のコードに目を通して原因を特定していくような場面も出てきました。自分の中であやふやに理解していたことを改めて公式ドキュメントを読み込んで人に伝える、ことをすることで自分の理解をさらに深めさせてもらえるので、質問される先輩を目指して引き続き頑張っていこうと思います。そういった立ち位置の変化から、アウトプットの大切さ、結婚もして30歳を目前とした自分の将来、いろいろな変化から、自分の名刺代わりになるようなこのサイトを作成しました。今年の目標昨年から家でなにかしらコードを書いている、といった習慣がついたので、それを継続しつつ興味のあることで遊んでいければと思っています。そして最近自分の市場価値について考えることが出てきました。今の技術の流行もある程度把握したうえで、ベースの知識をしっかり固めていくことを淡々とやっていきたいと思います。今年こそ何かを作りたい。体調万全にして頑張っていきたいと思います。

Undercurrent - Bill Evans and Jim Hall

Undercurrent - Bill Evans and Jim Hall『Undercurrent』は、ピアニストのビル・エヴァンスとギタリストのジム・ホールによる1962年のジャズ・アルバム。登場人物はお互い同年代の名ジャズアーティストである、ビルエヴァンス（ピアノ）、ジムホール（ギター）のみのデュオ作品になります。バラードを中心としていますが時折見せるスリリングな展開、情緒的で美しい余白感のある作品です。数あるデュオアルバムの中で最も有名な作品の一つ。「Undercurrent」 - 1962収録曲Side 1My Funny Valentine (Richard Rodgers, Lorenz Hart) – 5:21I Hear a Rhapsody (Jack Baker, George Fragos, Dick Gasparre) – 4:36Dream Gypsy (Judith Veevers)– 4:33Side 2Romain (Jim Hall) – 5:19Skating in Central Park (John Lewis) – 5:19Darn That Dream (Eddie DeLange, Jimmy Van Heusen) – 5:04参加アーティストBill Evans – pianoJim Hall – guitarこのアルバムを聴いてこのアルバムを聴いてまず思うことは、「音数が少ないのになぜここまで芳醇に聴こえるのだろうか」といった疑問でした。それぞれの音が粒になって目に見えるような美しさがあります。

放射状フェードイン ~CSS~

作るもの画像を中心から放射状に柔らかく表示するアニメーションを作成します。今回は @property を使用してアニメーションを作成していきます。@property開発者が明示的にカスタムプロパティを定義し、型継承の有無初期値上記を定義します。@property --property-name { syntax: "<color>"; inherits: false; initial-value: #c0ffee; }@property - CSS | MDN作り方考え方としては画像の上に擬似要素で背景色と同じ色の要素を配置@property を用いて、中心から放射状に透明色へグラデーション結果画像が表示されるような見た目になる上記の流れです。@property の定義//- 起点 @property --radial-start { syntax: &apos;<percentage>&apos;; inherits: true; initial-value: 0%; } //- 終点 @property --radial-end { syntax: &apos;<percentage>&apos;; inherits: true; initial-value: 0%; }@keyframes の定義@keyframes radial { from { --radial-start: 0%; --radial-end: 0%; } to { --radial-start: 100%; --radial-end: 125%; } }画像要素 に対してのスタイルfigure.img { position: relative; &:before { background-image: radial-gradient(circle, transparent var(--radial-start), #fbfaf5 var(--radial-end)); content: &apos;&apos;; position: absolute; inset: 0; z-index: 1; } /* .active クラスが付与された際に表示アニメーション */ &.active:before { animation: radial 1.2s ease-out; } }上記でやわらかい印象で画像を表示することができます。グラデーションの開始地点をカスタムプロパティ化して、アニメーションの開始地点をランダムに設定するのも面白いかもしれません。/* JS側からランダムの値を算出してカスタムプロパティの値を更新 */ :root { --x: 0%; --y: 0%; } &:before { background-image: radial-gradient(circle at var(--x) var(--y), transparent var(--radial-start), #fbfaf5 var(--radial-end)); }※応用これをテキスト表示アニメーションに応用します。p { background-image: radial-gradient(circle at 0% 0%, #000 var(--radial-start), transparent var(--radial-end)); background-clip: text; color: transparent; }背景の要素をテキストの形でくり抜いて、背景色に対してグラデーションをかけていくことで表現します。まとめ案件でふんわりとした出現アニメーションを表現したくて実装しました。これであれば実装コストも低く、少ないコードで実装ができます。手間をかけずにやわらかい印象を出したい場合には応用の効く表現かと思います。

放射状フェードイン ~CSS~

作るもの画像を中心から放射状に柔らかく表示するアニメーションを作成します。今回は @property を使用してアニメーションを作成していきます。@property開発者が明示的にカスタムプロパティを定義し、型継承の有無初期値上記を定義します。@property --property-name { syntax: "<color>"; inherits: false; initial-value: #c0ffee; }@property - CSS | MDN作り方考え方としては画像の上に擬似要素で背景色と同じ色の要素を配置@property を用いて、中心から放射状に透明色へグラデーション結果画像が表示されるような見た目になる上記の流れです。@property の定義//- 起点 @property --radial-start { syntax: &apos;<percentage>&apos;; inherits: true; initial-value: 0%; } //- 終点 @property --radial-end { syntax: &apos;<percentage>&apos;; inherits: true; initial-value: 0%; }@keyframes の定義@keyframes radial { from { --radial-start: 0%; --radial-end: 0%; } to { --radial-start: 100%; --radial-end: 125%; } }画像要素 に対してのスタイルfigure.img { position: relative; &:before { background-image: radial-gradient(circle, transparent var(--radial-start), #fbfaf5 var(--radial-end)); content: &apos;&apos;; position: absolute; inset: 0; z-index: 1; } /* .active クラスが付与された際に表示アニメーション */ &.active:before { animation: radial 1.2s ease-out; } }上記でやわらかい印象で画像を表示することができます。グラデーションの開始地点をカスタムプロパティ化して、アニメーションの開始地点をランダムに設定するのも面白いかもしれません。/* JS側からランダムの値を算出してカスタムプロパティの値を更新 */ :root { --x: 0%; --y: 0%; } &:before { background-image: radial-gradient(circle at var(--x) var(--y), transparent var(--radial-start), #fbfaf5 var(--radial-end)); }※応用これをテキスト表示アニメーションに応用します。p { background-image: radial-gradient(circle at 0% 0%, #000 var(--radial-start), transparent var(--radial-end)); background-clip: text; color: transparent; }背景の要素をテキストの形でくり抜いて、背景色に対してグラデーションをかけていくことで表現します。まとめ案件でふんわりとした出現アニメーションを表現したくて実装しました。これであれば実装コストも低く、少ないコードで実装ができます。手間をかけずにやわらかい印象を出したい場合には応用の効く表現かと思います。

はじめまして

初めまして。栃木県でフロントエンドエンジニアとして働いています。自分のサイトの一つも作ってみないとなぁと思い作ってみました。技術的な備忘録や好きな音楽や生活の日記的に使おうかと。こちらのサイトについては、-Next.js 15-MicroCMS-Vercelを使用しています。派手さはないけど配慮が行き届いたサイトが好きです。よろしくお願いします。

Undercurrent - Bill Evans and Jim Hall

Undercurrent - Bill Evans and Jim Hall『Undercurrent』は、ピアニストのビル・エヴァンスとギタリストのジム・ホールによる1962年のジャズ・アルバム。登場人物はお互い同年代の名ジャズアーティストである、ビルエヴァンス（ピアノ）、ジムホール（ギター）のみのデュオ作品になります。バラードを中心としていますが時折見せるスリリングな展開、情緒的で美しい余白感のある作品です。数あるデュオアルバムの中で最も有名な作品の一つ。「Undercurrent」 - 1962収録曲Side 1My Funny Valentine (Richard Rodgers, Lorenz Hart) – 5:21I Hear a Rhapsody (Jack Baker, George Fragos, Dick Gasparre) – 4:36Dream Gypsy (Judith Veevers)– 4:33Side 2Romain (Jim Hall) – 5:19Skating in Central Park (John Lewis) – 5:19Darn That Dream (Eddie DeLange, Jimmy Van Heusen) – 5:04参加アーティストBill Evans – pianoJim Hall – guitarこのアルバムを聴いてこのアルバムを聴いてまず思うことは、「音数が少ないのになぜここまで芳醇に聴こえるのだろうか」といった疑問でした。それぞれの音が粒になって目に見えるような美しさがあります。

LIVE - Donny Hathaway

LIVE - Donny Hathaway1971年に録音、1972年に発表された作品。アルバムの前半（LPのサイド1）には、1971年8月28日と29日にハリウッドのトルバドールで行われた公演からの抜粋が収録され、後半（サイド2）には10月27日から29日にニューヨークのビター・エンドで行われた公演から抜粋された。人物像Donny Hathaway（1945年10月1日 - 1979年1月13日）アメリカのシンガーソングライター。幼い頃から聖歌隊で歌い、ピアノを学び、のちにハワード大学に進学しクラシックを学んだ。大学卒業後には作曲家、ミュージシャン、カーティス・メイフィールドのもとでキャリアを積み、1969年に最初のシングル「The Ghetto, Pt. 1」を発表した。（同アルバムにも収録されている。）「ニュー・ソウル」と呼ばれるムーブメントの代表的な一人である。「LIVE」アルバムについてジョン・ブッシュはオールミュージックにおいて5点満点中4.5点を付け「オーディエンスの反応や、彼のグループの説得力あるジャズ的な名人芸に徹底的に焦点を当て、率直でエナジーに満ちたセットを収録した、彼のキャリアの中で最も輝かしいアルバムの一つ」「ソウルミュージックの最前線におけるハサウェイの重要性を、確固たるものにした」と評している。また、ピーター・バラカンは自著において本作を「名盤中の名盤」、収録曲「ゲットー」を「ブラック・ミュージックの歴史に残る名演」と評し、ハマ・オカモトは『bounce』において「数あるライヴ盤のなかでも最強」「本当のライヴ・アルバムとはこういう作品のことじゃないかと思わされます」と評している。「LIVE」 - 1972収録曲Side 1愛のゆくえ - What&apos;s Going On (Renaldo "Obie" Benson, Al Cleveland, Marvin Gaye) – 5:17ゲットー - The Ghetto (Donny Hathaway, Leroy Hutson) – 12:06ヘイ・ガール - Hey Girl (Earl DeRouen) – 4:01きみの友だち - You&apos;ve Got a Friend (Carole King) – 4:31Side 2リトル・ゲットー・ボーイ - Little Ghetto Boy (E. DeRouen, Edward Howard) – 4:29ウィアー・スティル・フレンズ - We&apos;re Still Friends (D. Hathaway, Glenn Watts) – 5:11ジェラス・ガイ - Jealous Guy (John Lennon) – 3:07エヴリシング・イズ・エヴリシング - Voices Inside (Everything Is Everything) (Richard Evans, Philip Upchurch, Ric Powell) – 13:40参加アーティストダニー・ハサウェイ - ボーカル、エレクトリックピアノ、ピアノ、オルガン、アレンジフィル・アップチャーチ - リードギター (A面 1 - 4)コーネル・デュプリー - リードギター (B面 1 - 4)マイク・ハワード - ギターウィリー・ウィークス - ベースフレッド・ホワイト - ドラムスアール・デルーエン - コンガこのアルバムを聴いて全体を通して最高のアルバムではあるが、特にライブ盤らしい曲間の客の拍手や歓声、曲が始まる際の気分の高揚を感じられ、自分もさも当時のこのライブの一員になったかのような感情を抱く。最初の曲がマーヴィンゲイの「What&apos;s Going&apos; on」から始まる、まさかカバー曲からこのアルバムが始まるのかと驚きもある。「やっぱりこの曲はマーヴィンだよね..」ともならず、別の良さが十二分に感じられる。最高のアルバムだ。

最近聴いている音楽

音楽が好きで、サブスクも聴きますがモノとして集めたくてレコードやCDを買っています。音楽の入り口としては18歳のときに70年代ソウルミュージックから入り、ボサノバ、ジャズ、昭和歌謡などを聴いています。18歳の時に初めて買ったCD（E Que Tudo Mais Va Pro Inferno - NARA LEAO）1978栃木に帰ってきてからは自然がより身近になったからなのかわかりませんが、アンビエントなどの環境音楽を聴くようになりました。元々、音楽を聴くというよりかは、空間を構成する一つの要素（家具や匂いとおなじようなもの）としての認識があるので自分の性に合ったのかもしれません。自分でアーティストや曲について調べるいい機会にもなるので、最近聴いてる曲や好きなアーティスト、アルバムを書いていこうかと思います。

抱負 -2026-

昨年の振り返りとにかく一瞬だった2025年が終わりました。地元に帰りフロントエンドとして働き始めて4年弱ほどになろうとしています。今年も勉強や最新技術のキャッチアップもしつつ、淡々と仕事をしていたらあっという間に過ぎていました。AIによるバイブコーディングなど、コードの書き方が根本から変わるような大きな変化の真っただ中にいるのが印象的な一年だったと感じています。この業界の変化は激しいですが、私個人の仕事にはとくに大きな変化はなく、AIエージェントととにかく壁打ちをして公式のドキュメントなどで答え合わせをしながらスピーディに対応していく、といった感じでした。ただ4年も仕事を続けていると、徐々に仕事にも慣れ、後輩も増えてきます。自分のコードだけに集中していればよかった時から、質問され、他人のコードに目を通して原因を特定していくような場面も出てきました。自分の中であやふやに理解していたことを改めて公式ドキュメントを読み込んで人に伝える、ことをすることで自分の理解をさらに深めさせてもらえるので、質問される先輩を目指して引き続き頑張っていこうと思います。そういった立ち位置の変化から、アウトプットの大切さ、結婚もして30歳を目前とした自分の将来、いろいろな変化から、自分の名刺代わりになるようなこのサイトを作成しました。今年の目標昨年から家でなにかしらコードを書いている、といった習慣がついたので、それを継続しつつ興味のあることで遊んでいければと思っています。そして最近自分の市場価値について考えることが出てきました。今の技術の流行もある程度把握したうえで、ベースの知識をしっかり固めていくことを淡々とやっていきたいと思います。今年こそ何かを作りたい。体調万全にして頑張っていきたいと思います。

クリスマス

2025年クリスマス🎄妻と休みが合ったので、ご飯を食べにいきました。ご飯を食べる前に、デパートに寄ったのですが、たまたま妻の好きな坂崎千春さん（Suicaのペンギンの作者さん）の作品を見つけました。悩みましたが、結婚して最初のクリスマスなので記念にしようといった感じでお迎えしました。（2026年度末で卒業してしまうといった話ですし・・）めちゃくちゃかわいい。