「shadcn/ui」って何が凄いの？実装知らないWebデザイナーが調べてみた｜akane
はじめにこんにちは！株式会社Rabeeのデザイナーのakaneです。 今回は、最近よく耳にする「shadcn/ui」について調べてみました。どうやらUIコンポーネントっぽいことは分かるけど、一体何を指すんだろう？いわゆる「UIライブラリ」との違いって何？といった疑問をデザイナー目線でお話しします。 どうぞ最後までお楽しみください🐰 「shadcn/ui」って最近よく聞きますよね「shadcn/ui」という単語、最近よく耳にしませんか？たとえば、最近話題になった10Xさんの記事。 なんだかよく分からないけど、UIコンポーネントの話をしているらしい。shadcn/uiはコンポーネントの集まりらしい。それを使うと、スピーディーなプロダクト開発ができるらしい…。 なんとなくは分かる気がするけれど、shadcn/uiって一体何なのでしょうか？UIコンポーネント集に見えるけど、既存のいわゆる「UIラ
Cloudflare Workflowsを使いたい倒したい
Introduction to Database Connection Management Patterns in TypeScript.pdf
Tailwind CSS v4.0
Holy shit it's actually done — we just tagged Tailwind CSS v4.0. Tailwind CSS v4.0 is an all-new version of the framework optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer. New high-performance engine — where full builds are up to 5x faster, and incremental buil
コーディング支援だけじゃない 「GitHub Copilot」をレガシーコードの文書化や説明に役立てる方法をGitHubが解説
GitHubは2025年1月15日（米国時間）、レガシーコードを扱うときにAI（人工知能）コーディングアシスタント「GitHub Copilot」がどのように役立つかや、GitHub Copilotを用いてレガシーコードを文書化したり説明したりする方法、これらを実施する際に留意すべきベストプラクティスを公式ブログで解説した。 GitHubは、GitHub Copilotが話題に上るときは、新しいコードの作成に焦点が当てられることが多いが、GitHub Copilotは既存のコードを理解するためにも同様に役立つと述べている。GitHub Copilotの自然言語処理機能を利用して、複雑なロジックを文書化したり、分かりにくい関数を説明したり、可読性を高めるための改善点を提案したりできるという。 レガシーコードを扱うときにGitHub Copilotがどう役立つ？ 関連記事 OpenAIの「o1
Cool Clineで完全自動コーディングを試したら新時代を感じた - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは何? Cool Clineという話題のVSCode Extensionsを試してみました。 Cool Clineとは? 公式のドキュメントが中国語だったのでgptに訳してもらいました。 平たく言うと，既存のClineをもとに使いやすいやつ作ったぜということらしい。 なぜ Cool Cline を作るのか？ VSCode 用の Cline 拡張には、複数のフォーク版が存在し、どれが最も機能的か判断しづらい状況です。代表的なものとして以下があります： cline/cline RooVetGit/Roo-Cline jnorthrup/
Reclineという庶民の味方！！GitHub CopilotでClineが使えるｗｗ - しとちゃぶろぐ
Reclineの構築手順本記事では、Reclineの構築手順について解説します。Reclineは、CLIおよびエディタ内で動作し、コードの作成、編集、実行を支援します。このプロジェクトはClineをフォークしたものであり、Claude 3.5 Sonnetによって真価が発揮されます。。 これ何がすごいって、VSCodeのLanguageModelAPIとCopilotを使用するため、実質月額10ドル払えば無限にClaudeがClineで使えちゃうんですよね！！！！！！！！！！（ついでにcopilotも使えちゃう） ということで、下記構築手順まとめます。 本記事を作成するにあたり、以下の情報を参考にしました。 Reclineリポジトリ: https://github.com/julesmons/reclineVSCodeダウンロードページ: https://code.visualstudio
ClineとAIコーディングツールの現状 - laiso
はじめに 近年、AIを活用したコーディングツールが急速に発展し、プログラマーの生産性向上や開発プロセスの効率化に大きな影響を与えつつあります。これらのツールは、コード補完、チャットアシスタント、コーディングエージェントなど、様々な形態で提供されており、プログラマーの作業をサポートしています。 その中でも、オープンソースのコーディングエージェントである「Cline」は、独特のポジションと活発なコミュニティによって注目を集めています。 本記事では、Clineを中心に、現在のAIコーディングツールの動向を探ります。Clineの特徴や利点、そして他のツールとの比較を通じて、AIコーディングツールの現状について考察します。また、Clineのアーキテクチャや実用面、コミュニティの動向についても解説します。 AIコーディングツールは、特に個人のプログラミングの世界に大きな変革をもたらしつつあります。本記
【VSCode】 マルチカーソル、使ってますか？
マルチカーソル機能の使い時 筆者がマルチカーソルを使用したくなる場面を3つ紹介します。 1. 命名を一括変更するとき 変数名や関数名を一括で変更するときに、マルチカーソル機能を使うことで、短時間で変更を行うことができます。 命名を一括変更している様子 検索バーから一括変更する方法もありますが、その場合カーソルが残らないため上記GIFのように複数の命名を試行錯誤しながら変更することができません。 2. 特定の範囲に閉じた修正を行うとき 特定の範囲に閉じた修正を行うときにもマルチカーソル機能は有用です。 特定の関数に閉じた修正 こちらは検索バーから一括変更してしまうと、下のfuga()関数にも変更が適用されてしまいますが、マルチカーソル機能を使うことで意図した範囲の修正に留めることができます。 3. フォーマットを変更するとき 以下のGIFではCSVで定義されたデータをMarkdownのドキュ
オープンソース住所正規化エンジンを地番住所に対応したメジャーバージョンをリリースしました！
Geolonia がオープンソースで公開している住所正規化エンジン normalize-japanese-addresses のバージョン 3 を公開しました。 住所マスターの更新 これまでのバージョンでは、国土数値情報や郵便局データを使った住所マスターをベースに動作していました。今回のバージョンでは、住所マスター自体も更新しております。具体的には、デジタル庁が公開しているアドレス・ベース・レジストリ（ABR）を元に作り直しました。 これにより、正規化できる住所の網羅性、精度の向上、更新頻度の安定化が期待されます。 デモサイトのご案内 新バージョンを早速お試しいただけるデモサイトをご用意しました。ぜひご利用ください。 デモサイトはこちら 出力形式の変更点 v3 へのアップグレードの際には、出力形式が変更されているためご注意ください。 v2 はそのまま利用いただく場合は出力形式が変わりません
人に優しいフォームを作ろう、特に日本人に
皆さん、フォーム作ってますか？ Webサイトやアプリを作るにあたって避けられないのがForm作成、多くの方が autocomplete を設定するなど、より使いやすいフォームを作成するために尽力されていることと思います。 一方で、悪気なく書いたコードでより使いにくいフォームになってしまっている例が世の中には多く見られます(特に銀行系) 今回は、よくあるフォームの実装を例に、(特に日本語話者にとって)より使いやすいフォームにするためのちょっとした仕様や私が考える対策を書いていこうと思います。 忙しい方のために最初に書いておくと、この記事に書いてあることの多くは autocomplete の仕様を意識した実装をしましょう の一言に集約されます。 多くの方にとっては「何を当たり前のことを」と思われる項目も多いかとは思いますが、当たり前のことがされていないフォームが世の中には多すぎるので、少しでも
UXデザイン用AIツールはまだ実用段階ではない： 最新状況
我々の調査と評価によると、UXデザインのワークフローを実質的に向上させる、デザインに特化したAIツールは今のところほとんどない。 AI UX-Design Tools Are Not Ready for Primetime: Status Update by Caleb Sponheim and Megan Brown on April 12, 2024 日本語版2024年9月4日公開 AIツールがUXデザイナーにすぐに取って代わることはないだろう。現在入手可能なLLMベースのツールはまだ、デザインプロセスのステップを省略できるものではないからだ。 調査概要 AIに関する大げさな広告宣伝が横行しているため、どのツールや戦略が「今すぐ」UXに役立つのかを見極めるのは容易ではない。 そこで、UX実践者がAIを業務に取り入れる有益で具体的な方法を見つけるために、我々は2024年初頭にUX実践者（
採用サイトリニューアル徹底解説～求職者の業務理解に役立つアンダーソン・毛利・友常法律事務所のサイト | 採用サイトの教科書
AMTで本プロジェクトを担当された、古沢さん・布上さんへのインタビューをもとに、サイトリニューアルの過程や効果を紹介します。 サイトリニューアルの背景2023年8月から始まった本プロジェクト。古沢さんによると、サイト制作の構想は実は数年前から頭の中にあったと言います。 古沢さん「私がAMTに入所する前に、転職活動中にウェブサイトを見たときから、もし入所できたらサイトをリニューアルしたいと考えていました。法律事務所ならではの厳格な雰囲気のウェブサイトは、敷居の高さを感じさせていると思ったからです」 既存の採用サイトは、弁護士の採用とスタッフの採用が1サイトにまとまったもの。敷居の高さに加え、情報量や構造の整理が十分ではなく、使いづらさを感じさせる部分が多々ありました。 加えて、AMTのスタッフ採用において課題になっていたのが下記の3点です。 ・新卒採用において優秀層の採用難易度が上昇した ・
フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ
TOPコラム新発見！フロントエンド技術の今フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ フレームワークだけじゃない！ 「State of JavaScript 2023」で見直すJavaScriptの人気ライブラリ 2024年9月2日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念
has()疑似クラスでコーディングが変わる！ CSS最新スタイリング - ICS MEDIA
2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。
VisualStudioCodeで絶対にしておくべき設定ベスト20
Visual Studio Codeで絶対にしておくべき設定ベスト20 はじめに Visual Studio Code（VSCode）は、開発者にとって非常に人気のあるエディタであり、その柔軟性と拡張性から多くのプログラミング言語やフレームワークに対応しています。VSCodeを最大限に活用するためには、適切な設定を行うことが重要です。本記事では、VSCodeで絶対にしておくべき設定ベスト20を紹介し、それぞれの設定がどのように開発体験を向上させるかを詳しく解説します。 1. テーマの選択 1.1 ダークテーマとライトテーマ VSCodeでは、ダークテーマとライトテーマの両方が利用可能です。開発環境の明るさや好みに応じてテーマを選択することで、目の疲れを軽減し、作業効率を向上させることができます。特に、長時間のコーディング作業を行う場合、適切なテーマ設定は重要です。 1.2 テーマの変更方法
ステップバイステップで学ぶ初めてのPHPアップデート | 株式会社divx（ディブエックス）
目次[非表示] 1.はじめに 2.なぜPHPバージョンアップが必要なのか？ 3.PHPバージョンアップ手順 3.0.1.PHP 7.4とPHP 8.3の変更差分調査 3.0.2.Laravelのバージョンアップ（7.3から10へ）の調査 3.0.3.Composerライブラリのバージョンアップ 3.0.4.PHP 8のローカル環境設定を更新する 3.0.5.静的解析の実施 3.0.6.テスト仕様書の作成 3.0.7.エラーの修正 3.0.8.テスト環境へのデプロイ 3.0.9.デバッグ 3.0.10.本番環境へのデプロイ 4.静的解析ツールの活用 4.0.1.PHPStanを使用した理由 4.1.ルールレベルの設定 4.1.1.使用した感触 5.まとめ 6.お悩みご相談ください はじめにこんにちは、株式会社DIVXでエンジニアを務めております、本間と申します。 今回は、PHPのバージョンを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google Maps Platform、月200ドルの一律無償利用枠を廃止。3月1日より料金体系が大幅改定【地図と位置情報】
AI時代に求められるプログラマの能力 / ability of programmer in AI era
「GPT-4o with canvas」がスゴい! 文章作成やコーディング生産性が爆上がり
Eleventy v3.0.0 is now available