⚡製図革命2.0⚡draw.io で図を作る AI スキルを作ってみた🚀 - Qiita
こんにちは、「図を AI に描かせたい欲」が止まらないアーキテクトのやまぱんです 😊 補足コメントや質問、いいね、拡散、ぜひお願いします 🥺！ 間違っていたら 優しく 教えてください！ 以前、「製図革命」として AG-Diagram Maker を紹介しました。 https://qiita.com/aktsmm/items/5dc37c60cadb61be659d 今回はその アップグレード版 として、内容も改善しつつ「スキル」という形でパッケージ化した話をします。 SKILL NINJA を使えばワンクリックでインストールできます 🎉 TL;DR 以前紹介した「AG-Diagram Maker」を スキル としてパッケージ化した SKILL NINJA 拡張機能で ワンクリックインストール できる 「アーキテクチャ図を作って」と頼むと 編集可能な .drawio ファイル が出力さ
Next.jsは「近道」か「迷路」か。迷子の初学者がWebの歴史を遡り、Next.jsの本質が見えてきた話
1. はじめに この記事を書いた理由 僕は現在、Next.js を使ってポートフォリオアプリケーションを開発しています。しかし、ある時ふと気づきました。 「なぜ Next.js を使っているのか、自分の言葉で説明できない」 チュートリアルをこなし、公式ドキュメントを読み、アプリを作る。基本的なことはある程度できるようになりましたが、「なぜこの技術が必要なのか」 という本質を理解していませんでした。 表面的な使い方だけではなく、技術の本質を理解したい。そう思った僕は Web アプリケーションの歴史を調べ始めました。 Web アプリケーションの変遷との出会い 学習を進める中で、Web アプリケーションの変遷について学べる資料に出会いました。 こちらの資料を読んだ理由は React の基礎を学びたかったからですが、Web アプリ開発の移り変わりについて非常に丁寧に書いてくださっており、そちらにも
Next.jsは「近道」か「迷路」か。迷子の初学者がWebの歴史を遡り、Next.jsの本質が見えてきた話
1. はじめに この記事を書いた理由 僕は現在、Next.js を使ってポートフォリオアプリケーションを開発しています。しかし、ある時ふと気づきました。 「なぜ Next.js を使っているのか、自分の言葉で説明できない」 チュートリアルをこなし、公式ドキュメントを読み、アプリを作る。基本的なことはある程度できるようになりましたが、「なぜこの技術が必要なのか」 という本質を理解していませんでした。 表面的な使い方だけではなく、技術の本質を理解したい。そう思った僕は Web アプリケーションの歴史を調べ始めました。 Web アプリケーションの変遷との出会い 学習を進める中で、Web アプリケーションの変遷について学べる資料に出会いました。 こちらの資料を読んだ理由は React の基礎を学びたかったからですが、Web アプリ開発の移り変わりについて非常に丁寧に書いてくださっており、そちらにも
AIによってプログラマの仕事が増え始めている - きしだのHatena
どうやら、中小企業で今までなら予算の関係でシステム化を見送っていたところが、AIコーディングを使うプログラマに発注すると手ごろな金額で実現できるということで、仕事の量が増えてるらしい。 もちろん単価は低いわけだけど、裾野が広がれば上も伸びるはず。予算があるところも、今までその予算では実現できなかったものが可能になってシステム化が増えるということもありそう。 自分の個人的にも、いままで時間がかかって面倒そうなので二の足を踏んでいたものが思いついたらすぐ作れるようになって、結果的に自分でコードを書く量も増えている。 他の人も、オレオレ便利ツールが手元にたくさんできてるんじゃないかと思う。 今までならOSSにしてたかもしれないけど、秒でできてしまったものにOSS化の手間をかける気にならないということで、この話に続くけども。 AIのせいでAIの学習データがなくなってきている - きしだのHaten
なぜJavaScriptのfetchはawaitを2回しないとレスポンスを取れないのか | maguro.dev
const resp = await fetch("https://api.example.com/data"); await を2回書いているのが気になったことはありませんか？1回の await で一気にレスポンスボディまで取れたら楽なのに、と思ったことはないでしょうか。 とある休日の午前中、いつものようにYouTube上でライブコーディング動画を見ていました1。そこで配信者の方が、fetchを使ってレスポンスボディを取得する際に2回目のawaitが必要であることに対して、「なんでfetchはこんなにめんどくさいんだろう」と言っていました。言われてみると、確かにめんどくさいような気もします。 この記事では、なぜ fetch がこのような設計になっているのかをいろいろな観点から掘り下げてみます。 fetch の使い方おさらい まずはJavaScriptのfetchの基本的な使い方を確認して
プログラミングが好きな人こそ今の時代、プログラマーになる方がいいと思う。- 「プログラミングが好きな人は、もうIT業界に来るな。」を読んで - じゃあ、おうちで学べる
はじめに AIにリサーチをさせていた。結果が返ってくるまで数分かかる。待っている間、Xを開いた。 流れてきたタイトルに、手が止まった。「プログラミングが好きな人は、もうIT業界に来るな。」 note.com リサーチは終わっていた。結果を確認しないまま、記事を読んでいた。小学生の頃から黒い画面に向かい続けてきたエンジニアが、生成AIの登場によって「自分の手で作る喜び」を奪われつつあると語っていた。「心の中で何かが音を立てて崩れる」という表現があった。 共感したのか、と聞かれると困る。共感しなかったのか、と聞かれても困る。たぶん、どちらでもある。読み終えて、エディタに戻った。さっきまで何をしていたか、思い出せなかった。 反論したいわけではなかった。ただ、何かが引っかかっていた。「プログラミングが好き」という言葉だ。この人の「好き」と、私の「好き」は、同じものを指しているのだろうか。 コーヒー
AI時代になぜ人が学ぶのか - そーだいなるらくがき帳
来週、学生たちに向けて『AI時代に学ぶ意味』というテーマで講演を行う予定で、その要点をここにまとめておく。 AI時代に学ぶ意味 概ね、理由は以下のとおり。 良い質問をするために知識が必要 AIの出力を評価する 抽象的なアドバイスを活用する これらを実行するためには、一定の知識とスキルが必要である。 スキルを身につけるためには基礎知識があるうえで経験が必要であり、そのサイクルがまさに学びなのである。 そのため、AIが普及したとしても、人が学ぶことの重要性は変わらない。 その前提を踏まえたうえで、各ポイントについて説明する。 良い質問をするために知識が必要 AIに質問する際には、質問の意味を理解している必要がある。 そして質問するにはまず、自分の無知の状態を認識しなければならない。 無知には5段階のレベルがあって、自分がどの状態にあるのか理解する必要がある。 これをFive Orders of
Claude Code Skills、結局どれを入れる？用途別おすすめ9選
各Skillの詳細解説 1. Playwright Browser Automation 概要 ClaudeがPlaywrightを使用してブラウザ自動化を実行するSkill。事前に用意されたスクリプトに制限されず、ユーザーの要求に応じてカスタムのPlaywrightコードをその場で記述・実行できる。 こんなときに使う Webサイトのテストを行いたいとき ブラウザ操作を自動化したいとき フロントエンドのUIテストやデバッグが必要なとき 具体的なユースケース ログインフローのテスト フォーム入力・送信の自動化 レスポンシブデザインの検証（複数ビューポートでのスクリーンショット取得） リンク切れのチェック E2Eテストの実行 使用例 2. prompt-engineering 概要 LLMのパフォーマンス、信頼性、制御性を最大化するための高度なプロンプトエンジニアリング技術を提供するSkill
TUI を構築するための Typescript ライブラリ OpenTUI
AI コーディングエージェントの普及により、ターミナルベースの TUI アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。この記事では OpenTUI の特徴と基本的な使い方を紹介します。 AI コーディングエージェントの普及により、ターミナルにふれる時間が増えた開発者が多いでしょう。そんな中、ターミナルベースの TUI (Text-based User Interface) アプリケーションの需要が高まっています。OpenTUI は Typescript で TUI アプリケーションを簡単に構築できるライブラリです。OpenTUI は opencode の基盤として利用されていることもあり、今後も開発が活発に続けられることが期待されます。この記事では OpenTUI の特徴と基本的な使い方を紹介
Let's EncryptでIPアドレス証明書を発行できるようになったので試した - ASnoKaze blog
Let's Encryptが6日間のShort-Lived証明書のサポートを発表しました。それに合わせて、IPアドレス証明書の発行もサポートされました。 「6-day and IP Address Certificates are Generally Available」 http://1.1.1.1 が実際にIPアドレス証明書を使ってたり、一部の用途でIPアドレス証明書のユースケースもあるので試してみる。 cerbotで発行 certbotも --ip-adress オプションをサポートした (コミットはあるが未リリース) ので実際に発行してみた。 ▶ https://160.16.124.39/ 良さそう。 方法 まだ未リリースなので、開発者ガイドラインの通り githubリポジトリから最新コードを実行する。 下記のコマンドで発行する (ドメインは必須では有りません。IPアドレスのみで
naoyaのはてなダイアリー - コネクションプーリングの話
かなりながーいエントリになる予定なので,結論だけ最初に書くとこんな感じ. この話題については自分も あとで書く と言って書いてなかったので書いてみますよ。2006年の下期にもなってコネクションプーリングかよというツッコミもありそうですが、あとで書くといったら書くの。あとで読むといったら読む。 普通「コネクションプーリング」と言ったら、主に二つの役割があると思います。話を簡単にするためにウェブアプリケーションに限定して言及します。 ウェブアプリケーションから DB への接続を開けっ放しにして、接続に必要とされるオーバーヘッドをカットして双方の負荷を下げる。 ウェブアプリケーションと DB への接続を「使いまわす」ことで、同時接続本数を節約する。 というもの。 mod_perl で DB と接続維持するとコネクション数増えて云々という話は主に前者のみについての話になります。Apache::DB
Just the Browser - Just the Browser
Just the Browser helps you remove AI features, telemetry data reporting, sponsored content, product integrations, and other annoyances from desktop web browsers. The goal is to give you "just the browser" and nothing else, using hidden settings in web browsers intended for companies and other organizations. This project includes configuration files for popular web browsers, documentation for insta
Anchor Positioningが全対応。HTML・CSSだけのポップオーバーが完全体に
2026年1月13日に、Firefox 147がリリースされ、「CSS Anchor Positioning」が全ブラウザ対応しました。HTML・CSSだけでポップオーバー表現をしつつ、好きな要素を基準に、ポップオーバーを表示できるようになりました。 たとえば、タスク管理のサブメニューを右側に表示する表現や、ヘッダーのユーザーアイコン下にドロップダウンメニューを表示できます。 タスク管理のサブメニュー ユーザーアイコンの下にドロップダウンメニューが表示される 私はずっっっとこの表現をHTML・CSSで実現したいと思っており、Firefoxの対応を待ち望んでいました。本記事で詳しく解説します。 Popover APIとは 従来、ポップオーバーを実装するには、大量のイベントリスナー、複雑な位置計算のロジック、スクロールやリサイズへの対応が必要でした。 たとえば次のようなJavaScriptのコ
JPG画像をBase64で送るとサイズが33%増えるが、Gzip圧縮すれば「ほぼ元通り」になるという話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 当たり前なのではというはてぶが多かったので、画像のファイルフォーマット毎の差異もまとめてみました。 また、本記事はGoogleのVirtual Try-On APIが、一見すると非効率なbase64エンコードで画像を受け取っていることをきっかけとして書いた記事です。 インターネット業界で大きな存在感を示しているGoogleがbase64で画像を受け取っているということは、何かしらの意味があるのではないかと思って調査をしてみました。 Web APIでJPG画像を送信する際、「バイナリ（multipart/form-data）で送るか」「B
Ghosttyでひらがなの「の」の表示が気持ち悪い問題をFixした
少し前からシェルを使うときにWarpじゃなくてGhosttyを使うようにしています。 WarpはLaunch Configuration機能があって大層気に入っているのですが、巷の評判でGhosttyのほうが人気っぽいのと、ちょっと使ってみると動作がとてもサクサクだったので、ここしばらく愛用しています。 そこで課題だったのが、一部のひらがなの表示がなんか気持ち悪い問題でした。 この画像のように、ひらがなの「の」だけがやたらと気持ち悪いフォントで表示されるのです。 本記事ではこれの解消方法を記しておきます。 バージョンは2026年1月5日時点の最新版、コミットIDは1c2db85aaです。 解決方法 いろいろ試したのですが、Font Familyを2重に指定する方法で解決できました。 少なくとも自分の環境では、これ以外の方法では治らないまたは、治ってもディスプレイの付け外しなどでおそらく画面
「パフォーマンスチューニングのために普段からできること」〜なぜ突然システムが遅くなるのか？ISUCON優勝者が語る計測と推測のリアリティ 〜 - KAKEHASHI Tech Blog
カケハシでの社内講演に、さくらインターネット株式会社の藤原俊一郎氏（@fujiwara）をお招きしました。「パフォーマンスチューニングのために普段からできること」というタイトルで、具体的な失敗談や現場の思考プロセス、そしてチューニングの本質についてお話しいただきました。 社内向けの場ではありましたが、貴重なお話をお伺いできたため、ご本人の許可を得て外部向けにまとめました。 当日は、前半を講演編、後半を対談編として構成し、対談パートにはカケハシのテックリードである松山も参加しました。 講演編：「パフォーマンスチューニングのために普段からできること」 なぜパフォーマンス問題は突然「死」を呼ぶのか グラフが改善したりISUCONで勝ったりする瞬間は「ものすごく楽しい」ものですが、一方で現在進行形でサービスが死んでいる状況は「めっちゃ楽しくない」ものです。長年育てたサービスが落ちることは、「自分の
JSer.info 15周年: 15年間のJavaScriptを振り返る
2011年1月16日に開始したJSer.infoは、2026年1月16日で15周年を迎えました🎉 JSer.infoは15年間で820件の記事を公開し、13,606件のサイト/記事/ライブラリを紹介してきました。週1回の更新を15年間継続しています。 この記事では、15年間のJSer.infoのデータを振り返りながら、JavaScriptエコシステムがどのように変化してきたかを見ていきます。 なお、この記事のデータはJSer.infoで紹介した記事の傾向であり、JavaScriptエコシステム全体を示すものではありません。 また、2024-2025年はJSer.info自体の投稿数が減少しているため、データにも2025年に減少傾向が出てしまっている点に注意してください。 15年間の基本統計 項目 数値 総投稿数 820回 総紹介記事数 13,606件 運営期間 2011年1月〜2026年
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Permix - Type-safe permissions management for TypeScript
The Astro Technology Company joins Cloudflare | Astro
useOptimistic Won't Save You | Colum Kelly