はてなブックマーク

こんにちは、よしこです。 先日、ローカルで見やすくGit差分を表示できるReviewItというOSSを公開しました。 こんなのあったら便利かなと思いつきで作ったツールでしたが、公開直後からとても好評です！ まだリリースしてから10日なのですが、GitHub Starに650⭐️が集まったり、既に14件のPRがマージされたりと、盛り上がっていてとても嬉しいです！ そんなReviewItなのですが、このたび名称を「difit」に変えることにしました！ 経緯 先日、ReviewItと類似の商標をお持ちの会社様より、既存サービス名称との混同を招く懸念などがある旨をご連絡いただきました。（一方的な侵害通告のような形ではなく、柔らかい形でご連絡くださいました） 私としても商標まわりは全然調べられていなかったのと、少しでも外部にご迷惑をおかけする可能性のないすっきりした状態で運用していきたいなと思い、改

これでローカルサーバーが起動してlocalhostが立ち上がり、HEADコミットの差分が以下のように表示されます！ 特定コミットハッシュの指定もできます。 # Review HEAD commit npx reviewit # Review Uncommitted working directory diff npx reviewit . # Review a specific commit npx reviewit 6f4a9b7 # Review HEAD~3 npx reviewit HEAD~3 # Custom port, don't auto-open browser reviewit 6f4a9b7 --port 4300 --no-open UIはGitHub同様side-by-sideとinline、デフォルト空白無視（-w状態）でどちらもグローバルヘッダーから切り替えら

こんにちは、よしこです。 普段の開発にClaude Codeをフル活用する毎日です。 ただ、Claude Codeは検索があまり強くないので、なにか解決できないエラーや込み入った問題は別途ChatGPTアプリでo3に聞き、回答をClaude Codeにコピペする、というのが常でした。 もう二人で勝手に話してくれ〜って思いながら情報運搬職人をやっていました。 しかし！なんと今朝、OpenAI APIのo3 modelがWebSearchに対応したのです！！ つまり、MCP経由でClaude Codeが直接o3に聞いて、o3がChatGPTのように検索しまくって推論して整理してClaude Codeに返してくれる時代が来たのでは… というわけでさくっとMCPを作ってみました。 中から検索込みでo3のAPIを呼ぶだけの、1ファイルだけのごく薄いMCPラッパーです。 API Keyと一緒に、推論と

こんにちは、よしこです。 最近コーディングではAIを活用できる場面が増えてきたのですが、これまで記事の執筆にはなかなかAIを活かせていませんでした。私は文章表現にこだわりが強いようで、抵抗感が拭えず… でもそんな自分でもAIを活用して記事執筆の負担を削減できる方法が見えてきたので、今回はそれを紹介したいと思います。 といってもすべてを書かせるわけではありません。イメージこんな感じ！（せっかくなので挿絵にも使ってみる） 骨組み（0~20%） 内容や要点のメモ書き。一旦箇条書きとかでいいので楽 肉付け（20~70%） 骨組みを文章にしていく。ここが結構悩むしめんどくさい 仕上げ（70~100%） 記事としてだいたいできたものを第三者視点で見返し、読みやすく調整を重ねる 形になっているものの調整なので、時間はかかるけど気は軽い このうち一番ボリュームのある「2. 肉付け」をAIにやってもらう方法

こんにちは、よしこです。 最近、個人的に欲しいツールをVibe Codingで作ることが増えてきたので、私の中で定着してきた進め方をまとめてみようかなと思いました。 ちなみに "Vibe Coding"（雰囲気コーディング）というのは、「人間が音声やテキストで指示を出し、AIが主体となってコードを書くコーディングスタイル」を指すワードです。 私もこのやりかたをするときはほとんどコード書いてません。 要件定義 まずは「何を作るのか」「ターゲットは誰か」「どんな機能が必要か」「画面構成はどうするか」などを決めます。好きなAIとチャットベースで喋りながらまとめていきます。 こっちが全然考えきってなくても、「◯◯なアプリ作りたいんだけど要件定義手伝ってー」から会話を始めれば必要な情報は向こうがヒアリングしてくれます。 ここはChatGPT 4oを使うことが多いです。トーンやノリが個人的な好みと合っ

※ 当記事は、さくらじまハウス 2024 のLT「レンダリングを探訪する」 の書き起こしとして作成しました。 LT資料: はじめに この記事では、ブラウザのレンダリングについて掘り下げていきます。Web アプリケーション開発において、パフォーマンスの最適化や複雑なバグの解決は日常的な課題です。ブラウザのレンダリングフローを理解することで、それらの原因をより深く突き止めることができるようになります。 ブラウザと一口に言っても数多く存在しますが、今回は多くのブラウザで採用されている Chromium を題材に、そのレンダリングの仕組みを詳しく見ていきます。Chromium は Google Chrome、Microsoft Edge、Opera などで採用されているため、その仕組みを理解することは Web アプリケーション開発者にとって大きなヒントとなるでしょう。 ※ シェア列は、資料作成時点

※ 更新: 2024/10/20 はじめに Biome は JavaScript や JSON 向けの強力なコード品質管理ツールですが、数多くのルールの中から適切なものを選ぶのは難しい場合があります。この記事では、私が Biome を使う際に最低限入れておくルールを紹介し、それぞれの具体的な使用例を解説します。 基本設定 公式ドキュメント「Getting Started」に記載されている基本設定は以下です { "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false }, "files": { "ignoreUnknown": false, "ignore": [] }, "formatt

@uhyo さんのTS本ということで読んでいます。 一応入門書という位置づけなので、社内での育成に活用したい目線。 とはいえ自分でも学べるところ多そう、特にTSのd.tsみたいなモジュールまわり理解弱いので… 全体的な感想 4章（関数）、6章（高度な型）が特によかった。 （5章が入ってないのは自分がクラス使わないからなので、使う人だったら5章も入ってると思う） 自分も何年かフロントエンドエンジニアとしてやっているのでさすがにだいたいは知っている内容のおさらいになったけど、それでもふわっとした理解が適切に言語化だったり、コーナーケースの知らない挙動など発見は沢山あった。 特に育成には有用だなと思った。6章の内容は理論と実践の話のバランスが良く、レベル的にもそれなりにTS書いてる人でも知らないこと全然ありそうな内容だったので、自分のチームのメンバーにも少なくとも6章は読んでもらいたい。勧めます