Digest

二十歳になってから二日酔いするようになった

お酒は楽しいから飲んでるの！

今日ランチというかで 17 時半くらいに居酒屋でご飯食べたときに思った。

どうして飲むのかいつ飲みたくなるのか

ぼくがどうして飲酒しているのか。

blog.naito.dev を支える技術スタック

このブログを支える技術スタックについて。Nuxt Content を中心に、Nuxt エコシステムを活用。Cloudflare Workers にデプロイ

Vue Vineで 1 ファイルに複数コンポーネント

Vue Advent Calendar 2025 14 日目の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 今回は Vue Vine を紹介します。 SFC で小さなコンポーネントを書くときに面倒だなと思ったことはありませんか？ 親コンポーネントでしか使わないのにわざわざ別ファイルに切り出して props を定義して import して、、、 ファイル間を行き来するのは地味にストレスです。 「同じファイルにサッとコンポーネントを追加できたらな〜」と思ったことがある方もい...

Vapor Mode で変わる Vue JSX 体験

Vue Advent Calendar 2025 25 日目(シーズン 2)の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 今回は vue-jsx-vapor を紹介します。 Vue 3.6 が 2025 年 12 月 23 日にリリースされました。 Vapor Mode についてはおそらく一度は目にしたことがあるのではないかと思います。 JSX と Vapor Mode についての情報はあまり目にしたことがないと思い今回調べてみました。 https://github....

コンポーザブルからコンポーネントを返してみる【Vue】

Vue Advent Calendar 2025 13 日目の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 『【習作】Vue でラジオボタンを実装してみる』を公開したところ chibivue land Discord サーバーにて、miyaoka さんから、コンポーザブルからコンポーネントを返すようにできると教えていただきました。ありがとうございます。 「そんなことできるの！？」と驚きましたがたしかにできました。 この記事では、Vue のコンポーザブルからコンポーネントを返...

2025 年の振り返り

1 月 去年の振り返りは元日にやっていたみたい 元日からビールを飲みに町に繰り出した 次の日は東葛.dev で知り合った yuhi さんと柏駅でもくもく会した さらに次の日は Funabashi.dev の ちゃまほりさん Zaki さん maguro さんと船橋の IKEA でもくもく会 できませんでした 持ってる本を読み進められたかというと No 年始は年末から続けていた Nix の環境構築だ…

【index.vue】その VS Code タブ名、わかりづらくない？【[id].vue】

Vue Advent Calendar 2025 15 日目の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 この記事は『【index.ts】その VSCode タブ名、わかりづらくない？【page.tsx】』の Vue / Nuxt 版です。 https://zenn.dev/bmth/articles/vscode-tab-display-name-alias と言っても同じ設定方法です。特に違う点はありません。 紹介する記事は React, Next.js ですが、Vu...

【習作】Vue でラジオボタンを実装してみる

Vue Advent Calendar 2025 17 日目の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 急にラジオボタンコンポーネントを Vue で実装したくなったので実装してみます。 よろしくお願いします。 ! この記事は Vue 初級者〜中級者の方を対象としています。 そのままプロダクトにコピペして使えるコンポーネントを提供することを目的としていません。 (<form> 要素との連携(バリデーションやサブミット処理など)はこの記事では扱っていません。)...

公式が勝手に言ってるだけ

Vue Bits って知ってる？

Vue Advent Calendar 2025 1 日目の記事です。 https://qiita.com/advent-calendar/2025/vue はじめに ナイトウ(@naitokosuke)と申します。 今回は、Vue.js 向けの美しいアニメーション付き UI コンポーネントライブラリ Vue Bits をご紹介します。 公式ドキュメントで一覧を見ているだけでワクワクします。 実際の業務で使用できるものは多くないかもしれませんが、ソースコードを眺めて「ふーん」ってするのも良さそうです。 ぜひ見てみてください！ 公式ドキュメントを見てほしいですが、一応デモリポジトリ...

祝日(三連休)の何が嬉しいかって

まず休日が 1 日増える それだけじゃない どういうわけか次の連休までの平日の数が 1 つ減る だから実質 -2(+2) 、これが嬉しい

【感謝】Vue Fes Japan 2025 登壇しました【初】

はじめに ナイトウ(@naitokosuke)と申します。 Vue Fes Japan 2025 にて『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』という題で発表させていただきました。 https://naitokosuke.github.io/vue-fes-japan-2025-slide/ いい加減な発表にはしたくないと思い、自分なりに色々考えて発表に臨みました。 そのことについて書きます。 CfP 30 分トークで採択いただきましたが LT でも応募しました。 『Vue.js フロントエ...

最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発(Lite ver.)

最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発

Vue Fes Japan 2025 に登壇した

Vue Fes Japan 2025 で『最高の DX - Nuxt Typed Router と Pinia Colada で実現する次世代 Vue/Nuxt 開発』という題で発表した。

Vue を仕事で書くようになりました

Vue.js 公式 VS Code 拡張機能の Premium Features のご紹介【㊗️無料化🎉】

はじめに ナイトウ(@naitokosuke)と申します。 Alexander Lichter さんの YouTube 動画を見ている時に、見慣れない VS Code の表示に気づきました。 <script>や<template>タグが透明になっていたのです。 https://youtu.be/OjMkGenTerM Natsuki (@natch_engr) さんに Vue の公式 VS Code 拡張機能の Premium Features の 1 つである Focus Mode によるものだと教えてもらいました。 ありがとうございました！！ ! こちらも...

Claude Code がインストールしていないツールを使いこなしている！？

はじめに ナイトウコウスケ(@naitokosuke)と申します。 Claude Code の vibe coding にひとしきり驚いたところです。 Claude Code に調査タスクをぶん投げると、 ╭─────────────────────────────────────────────────────────────────────────╮ │ Bash command │ │ ...

インタラクティブな ICT 教材の実装に DSL で立ち向かう

「ブランチ作ってプッシュするたびに --set-upstream 打つのが面倒だな」と感じているなら

はじめに ナイトウ(@naitokosuke)と申します。 Git で新しいブランチを作成してプッシュするときに、 git push --set-upstream origin ブランチ名 を打つのが面倒だと感じたことはありませんか？ # 新しいブランチを作成 $ git switch -c feature/new-feature # プッシュするときに --set-upstream が必要 $ git push --set-upstream origin feature/new-feature この --set-upstream を省略する方法を紹介します。 Git に言われ...

Vue Composition API script setup のお約束をスニペットにする【VS Code】

はじめに ナイトウ(@naitokosuke)と申します。 <script setup lang="ts"> // </script> <template> <!-- --> </template> <style scoped> /* */ </style> を新しい .vue ファイルを作成するたびに書きます。 VS Code のスニペットとして登録してしまおうと思います。 手順 .vscode/ に vue.code-snippets を作成 スニペットを登録 vue.co...

2024 年の振り返り

1 月 転職。 久しぶりのフル出社で毎日くたびれていた。 Zenn を始めた。 2 月 すでに転職を検討している。 地元で交流会をやりたい気持ちに。 3 月 v-tokyo に行く。 OOC にも行く。 4 月 Japan IT Week に出展。 5 月 これいまだに読めてない。 東葛.dev。 Vue Mastery に登録。 技術書典にも行く。 6 月 Rye に出会う。 FastAPI +…

『Behind The Code: Nuxt.js mini-documentary』を見て

Nuxt / UnJS Advent Calendar 2024 6 日目の記事です。 ! 2024/12/20 に登録しました。 はじめに ナイトウ(@naitokosuke)と申します。 最近 YouTube にハマっています。 Supabase さんが Nuxt チームのドキュメンタリー動画をアップしました。 https://youtu.be/uvG11I-ftfo?si=vFK86CndmuMPOG01 Sébastien Chopin さんのツイートはこのドキュメンタリー撮影のことだったんですね。 https://twitter.com/Atinux/status/186...

『All about VoidZero - The Interview with Evan You』を見てわかったこと思ったこと

Vue Advent Calendar 2024 19 日目の記事です。 はじめに ナイトウ(@naitokosuke)と申します。 Alexander Lichter さんの YouTube 『All about VoidZero - The Interview with Evan You』を見ました。 https://youtu.be/33ex2A04b7g?si=ERcpbXL6chiqzXYk 前から VoidZero については興味がありましたが、なかなかキャッチアップできていませんでした。 このインタビュー動画はとてもありがたかったです。 インタビューは英語で行われていま...

ぼく「誰かやり方教えて！」 -> ぼくより偉い人「やっときます！」 -> ぼく「(ぼくには権限ない？また頼まなきゃ)」

って経験を前職で。 6 月くらいの話。 めっちゃ暑い 6 月くらいの日の話。 暑すぎて作業している階の空調を冷房に変えたかったぼく。 フルリモート許可時代だったので階に人が誰もいない。 Slack で「誰か助けて！」って言ったら「その階に用あるしつでにやっとくよ」的回答を総務の方にもらった。 ここでぼくはどういうわけかその回答から「空調のリモコン運転切り替え操作はぼくが勝手にやっていいことじゃない…

『MAID HACKS 改訂版 実在の英国メイド・エピソード集』と出会った

2024年の"推し"本 Advent Calendar 2024 の 12 日目。 『MAID HACKS 改訂版 実在の英国メイド・エピソード集』(サークル: SPQR、著者: 久我真樹) この本を読んで感じたこと、学んだこと。 労働環境の改善の必要性 平等な社会を目指すことの大切さ どんな人でも尊重されるべきである この本と技術書典 17 で出会った。 店頭で見つけたときテンション上がった。 …

v-for の区切り文字 in と of について調べてみた

Vue Advent Calendar 2024 6 日目の記事です。 https://qiita.com/advent-calendar/2024/vue はじめに ナイトウ(@naitokosuke)と申します。 前から気になっていた v-for ディレクティブの区切り文字 in, of について今日は調べていきます。 v-for 配列に基づいて項目のリストをレンダリングするには、v-for ディレクティブを使用します。v-for ディレクティブでは、item in items という形式の特別な構文が必要になります。 https://ja.vuejs.org/guid...

【環境構築】Vite + Vue + UnoCSS で簡単なグリッドレイアウトを作ってみる

Vue Advent Calendar 2024 4 日目の記事です。 https://qiita.com/advent-calendar/2024/vue はじめに ナイトウ(@naitokosuke)と申します。 Vite、Vue、UnoCSS を組み合わせて開発環境を構築する手順を詳しく解説します。 構築した環境で簡単なレスポンシブなグリッドレイアウトの画面を作成します。 この記事を参考にしていただき、ぜひ UnoCSS を試してみてください。 UnoCSS とは https://unocss.dev/ Instant On-demand Atomic CSS Engin...

『口に関するアンケート』を読んだ

20分くらいで読めて嬉しかった。 ぼくはエンタメ本にはとにかく厳しい。 ホラーは〇〇大賞(読者賞、本屋大賞除く)受賞作しかほとんど読んだことがない。 ジャケ買いってしたことない気がする。 先週本屋で見つけたときからこの本のことが頭から離れなくてずっと。 今日電子で買った。 よかった。 「やらないでね。あっやられそう。やられてる？あーやられた。」 ぼくは読者でとにかく作者にやられる体験をしたい。 や…

I'm Nathan Green! (English name を決めた🦋)

Bluesky が界隈で最近流行ってる。 🦋 表示される投稿が英語が多い。 どういうわけか。 ということでぼくも英語で投稿していきたい。 まずは形から。 English name を考えた。 ChatGPT に考えてもらった。 というわけでぼくは今日から Nathan を 名乗ることにした。 緑が好き。 だから Green。 I'm Nathan Green! Hi.

#技術書典17 で出会った『締切 対 先延ばし癖』を読んだ

しずかなインターネットではなるべく文章を書かないようにしようと思っていた。 これはなんとなくの思いつきで始めたことだったんだけど、イベントとか体験とかの感想について書くときは結構よくて、この思いつきは無理なく続けることができていた。 例えば、最初の文章をこの思いつきで書き直すと、以下のようになる。 しずかなインターネットでは文章を書かない。 なるべくそうしてきた。 そうしようと思っていた。 なんと…

個人的オーバーテクノロジー Apple Watch、ぼくには必要なかった。

Apple Watch を買ったのはもう 3 年前くらい。 3 年経って、 Suica 万歩計 としてしか今は使っていない。 時計は 作業中なら PC。 移動中なら スマホ。 音楽プレイヤーとしても使ってない。 AirPods カチカチしてやってる。 万歩計機能は結構よくて、 家の中でも結構歩いているんだなという気づきがあった。 Suica 機能はかなり気に入ってて、 右腕に巻くと改札がラク。 最…

10/19(土)、Vue Fes Japan 2024 楽しかった

楽しかった。 ぼくは誘導係をやらせてもらった。 仲良くしていただいてる方にも入り口で挨拶できて嬉しかった。 ウォーキング大会中に迷子になってしまった女性を助けたりもした。 ビルに入る前から所属団体のTシャツ着てるスポンサーの方もいてよかった。 気合いというかやる気というか。 お弁当の回収とかも楽しかった。 ああいう作業が好きかも。 たまにやりたい。 いい人とも知り合いになれた。 一年後までにどっち…

自己紹介

9/21(土)、Vue Tea Time (仮称) #1 をやった

ぼくが Vue を教わるイベント。 えいやで connpass イベントにしてしまった。 イベント名は適当。 もくもく会以外もやりたくて。 最近よくわからない状況になっている。 (めっちゃ恵まれている状況。) (恵まれすぎていてよくわからない状況。) 困っている、教えてほしい。 みたいなことを言うと、誰かが助けてくれることが増えてきた。 Vue Tea Time (仮称) も Vue が得意な方に…

【非公式】Vue Fes Japan 2024 前にﾁｮｯﾄ予習【勝手に】

はじめに ナイトウ(@naitokosuke)と申します。 今年も Vue Fes Japan がやってきます！！ https://vuefes.jp/2024/ みなさんチケットのご購入など参加準備はお済みですか？ ぼくは今年もボランティアとして Vue Fes Japan に参加します！ スタッフ作業に奔走する予定ですが、「どうせ参加するなら予習しよう！」と思ってセッション内容のキーワードについて調べました。 全く知らない -> チョット知ってる という状態で Vue Fes Japan 2024 に参加しましょう！！ ! ボランティアスタッフという立場ではありますが、本記...

映画館でもう一度観たい、『ボーはおそれている』

『ボーはおそれている』は映画館で見るべき作品だった。 家でサブスクで見たものと、映画館で見たもの。 全く同じ映画とは思えなかった。 映画館ではただひたすら長い 3 時間だった。 家で見た『ボーはおそれている』はあっという間の 3 時間だった。 映画館では「うわー」って感じだった。 家で見ると笑いが止まらなかった。 2 回目だからなのだろうか。 アリ・アスター作品って二度と見返したくないと思ってた。…

V が名前に入ってる(再)

V が名前に入ってる

もっとくわしく UnoCSS ～設定篇～

🙋 はじめに ナイトウ(@naitokosuke)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss こちらの記事では、UnoCSS の成り立ちや経緯を紹介し、UnoCSS の特徴について紹介しました。 今回は UnoCSS の設定について紹介したいと思います。 設定プロパティを知ることで、UnoCSS の特徴をより深く理解できます。 また、設定プロパティの豊富さから UnoCSS の柔軟さを感じて...

ITめっちゃ楽しい

イエーイ✌️ わからないことだらけ✌️ 毎日新しいことに出会える✌️

もっとくわしく UnoCSS ～公式プリセット篇～

🫡 はじめに ナイトウ(@naitokosuke)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 https://zenn.dev/comm_vue_nuxt/articles/what_is_unocss こちらの記事では、UnoCSS の成り立ちや特徴を紹介しました 今回は UnoCSS の公式プリセットについて紹介したいと思います。 公式プリセットを活用することで UnoCSS をパワーを最大限に生かすことができます。 公式プリセット(UnoCSS の特徴)を知って、UnoCSS を好きになってい...

UnoCSS を知る、まずは経緯から

👋 はじめに ナイトウ(@naitokosuke)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋‍♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を...

8/3(土)、東葛.dev #1 をやった

初めての開催する側。 参加者の方が来てくれてめちゃうれしかった。 Slidev でスライド作ってみて。 Slidev が好評で嬉しかったです。 antfu 推しなので。 初回からまさかの東葛エリア外からの参加者の方が来てくれた。 柏のことを褒めてもらえて嬉しかった。 この枠というか集まりでやってくかはわからないけど、 柏の魅力というか、紹介というか、広めていきたい。 何かしら、地域貢献したい。 今…

Python でファクトリメソッド？

英語ドキュメント、記事、ブログを読むための英単語帳

はじめに ナイトウ(@naitokosuke)と申します。 最近英語の技術記事を読んだり、海外の方の書かれたブログを読む機会が増えてきました。 「イチジジョウホウ, イチジジョウホウ...」としていると、どうしても英語を読むことを迫られることがあります。 日本語訳が間に合ってないものもあります。 技術の思想や概念についてなど見慣れない表現が多いことに気がつき、美貌のために個人的に単語帳を Notion にこさえていました。 共有やフィードバックが欲しくなったので記事にします。 「この単語よく目にするよ！」、「この表現はこういうニュアンスかも」みたいなコメントいただけたら嬉しいです。 ...

東葛.dev

7/26(金)、v-tokyo に行った

中野です。 年末年始でもないし。 中野サンプラザないし。 好きなもののために中野来てるの懐かしい。 スタッフの方にも覚えてもらった。 3回目の参加。 #21 は「エコシステムキャッチアップ特集!」。 最近 Rust ってよく聞くけどなんでか全くまるでわかってなかったので話を聞けてよかった。 動作が遅かったらバグと見なすみたいな思想が oxc チームにはあるらしく、狂気。 こわすぎる。 VueUse…

通勤中の読書、学習が無理すぎる

気づいた。 満員電車の中でiPadを抱えるのが無理すぎ。 往復4時間、何しよう。 泣。

ドラクエモンスターズ3に溺れた1週間

久しぶりにゲームにのめり込んだ。 毎日睡眠時間を削って、 目が痛くなるまで、 遊んだ。 クリアして、 裏ボス倒して、 最上位モンスターを作成し終わった。 ナンバリングは8、9、11しかやったことなくて、 ストーリーとか演出にあんまり感動できなかったのが残念。 一般教養としてナンバリングタイトル全部触っときたい。 ビアンカフローラとか全くピンときてないし。 イルルカ遊んだ時もしばらくずっとモンスター…

要件定義@理髪店

今日は髪を切りました。 切ったのは店員さん。 正しくは髪を切ってもらいました。 美容室とかが少し苦手で。 髪型とか別になんでもいいとか思っちゃっている。 店員さんの方が知見ある。 店員さんが髪型を決めた方がいいって思っている。 「おまかせで」とか言っちゃう。 自分は要件をなかなか決めてくれないお客様にモヤモヤしているのに。 今日は写真を見せて「こんな感じでお願いします。」って言った。 写真もお店入…

5/28(火)、v-tokyoに行った

GINZA SIXで。 よかった。 前回に続きv-tokyoは2回目の参加。 #19ではVue3.4のキャッチアップがテーマだったが、今回#20はDX(開発者体験)について。 ヘッドレスUIという言葉の意味とradix(Radix Vue)の存在を知った。 LTコーナーではLTらしいLTというか、ライトニングなトークを体験できた。 どの人のどのLTも勉強になるし、とても楽しい。 いつか何かしらLT…

3/24(日)、OOCに参加した

OOC2024に行きました。 茗荷谷っていうのが新鮮でよかった ミノ駆動さんのご尊顔を拝することができた 本当に嬉しい OOC実行委員長の方にも懇親会の際に少しお話しいただけた みなさんとても優しかった みんな情熱に満ち溢れていてぼくもすごく刺激をもらった DDDとかはすごく難しいけど、ビジネスロジックを型に落とし込むという発表が結構個人的に学び深かった モデルの不正な値(状態)をどうやって防ぐか…

3/6(水)、v-tokyoに行った。

よかった。 もっかいいきたい。 えっ！？お米！？ 内容は難しいもの多かった。 https://vuejs-meetup.connpass.com/event/309755/ 3.4にアップデートするだけでパフォーマンス向上するらしい。 米が美味いことだけわかった。 10/19(土)、絶対いきたい。

尿意駆動開発

最低のタイトルだ。 最近やっている。 尿意駆動労働が正しい。 尿意ファーストかも。 やっていることは簡単で、決まった時間に決まった量の水を飲む。 それだけ。 1日に2Lの水を最低でも飲むようにしている。 時刻の目盛りの入った水筒を使っている。 水をたくさん飲むことのそれ自体のメリットはまだ体感できていない。 けど、たくさん飲むとトイレに行く回数が増える。 これがいい。 Apple watchに「そ…

ゴミ捨て当番のルールをドキュメント化した

先月の話。 ゴミ捨て当番のルールを明文化した。 私は実家住みの28歳。 ゴミ捨てのルールを知らずに過ごしてきたことを反省。 近所に同年代のご家庭が増えてきている。 両親のご近所付き合いだけではルールが浸透しなくなってきていた。 近所で顔も名前も知らない人が増えてきた。 母やお隣さんに聞き取りを行い、なんとかドキュメント化に成功。 ルールと言ってもとても簡単。 月に2回ある資源ごみの日に缶とかペット…

「前にも申し上げましたが」って言うのをやめた。

この表現があまりにもひどいことがわかったので言わないようにした。 前職の部長にフィードバックをもらったことがある。 お客様とのやり取りの中で、以前もこの議題を取り扱ったことがあることに気づいた私は「前にも申し上げましたが」という表現を使ってしまった。 お客様がどう受け取ったかについては聞くことができなかったが、きっと嫌な気持ちにさせてしまっていただろう。 信頼感も損ねてしまっていただろう。 ぼく自…