次世代のエディター Cursor(カーソル) を使いこなす(2024年更新) - Qiita
はじめに こんにちは。 株式会社HRBrainでバックエンドエンジニアをしている、蔭山といいます。 株式会社HRBrainではアドベントカレンダーに参加しています。 本記事は5日目になります。 今回は、なにかと話題の生成AIに乗っかりまして「AI時代のエディター Cursor」を紹介したいと思います。 コードエディターであるCursorは、AI技術を駆使してコーディング作業の効率を飛躍的に向上させるツールです。 この記事では、Cursorの特徴、インストール方法、オススメ機能を詳しく解説します。 Cursorの特徴 AI技術の活用: CursorはAIを利用してコードの自動生成やエラーの検出、修正を行います。有料プランに登録する他に、自分でOpenAI API Keyを登録して使うこともできます。 開発者向け設計: VS Codeをフォークして作られており、VS Codeユーザーはスムーズ
Tailwind CSS 独自のプロパティ名覚えるの大変だな → Master CSS にしようかな - Qiita
import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' import './index.css' + import '@master/css' ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode> <App /> </React.StrictMode>, ) import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' function App() { const
Render hooksをコンポーネントの拡張として理解する - Qiita
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
Render hooksをコンポーネントの拡張として理解する - Qiita
Render hooks とは、ReactにおいてカスタムフックからJSX式を返す設計パターンのことです。リンク先は私が当時在籍していた会社のテックブログに書いた記事で、当時の会社でこの設計パターンがハマる箇所に出会ったためアイデアを記事化したものです。ちなみに、Render hooksという命名は私ではなく当時の私の上司です。 私は当時から今までずっとこのパターンを推奨しているのですが、あまり流行る気配がありません。そこで、この記事では皆さんがこのパターンの考え方にもう少し納得できるように、render hooksパターンは普通のコンポーネントの拡張であるという見方をご紹介します。 Render hooksパターンの概要 Render hooksパターンは、UIの実装（JSX）と、そのUIに関連するロジック（たとえばステート）をまとめてカスタムフックから提供することを指します。簡単な例を
有名企業のエンジニアの平均年収をランキングにしてみた - Qiita
有名企業のエンジニアの平均年収とかってどのくらいだろう？と気になったのでまとめてみました 企業のエンジニアの平均年収・中央値年収 全87社の大ボリュームなので、ぜひ参考にしてください！ ▼Twitterでも発信しています https://twitter.com/issueissue4 ▼エンジニア向け案件獲得プラットフォーム https://i-ssue.com/users/signup ■参考元 https://project-comp.com/ https://www.vorkers.com/company_answer.php?m_id=a0910000000Fr7M&q_no=2 https://www.jobdirect.jp/entry/2016/10/29/184100 https://opensalary.jp/roles/software-engineer
Clean Agileを読んで学んだアジャイルのまとめ - Qiita
概要 Clean Agile 基本に立ち戻れ (アスキードワンゴ) | Ｒｏｂｅｒｔ Ｃ．Ｍａｒｔｉｎ, 角 征典, 角谷 信太郎 | 工学 | Kindleストア | Amazon を読んでのまとめです。 アジャイルソフトウェア開発の本来の目的の概要を提供する本です。 この記事では、この本から私が学んだことをただまとめます。 解釈については私見のため、間違えている可能性があります。 これは書籍からの引用を表します。 より深く知りたい場合は、書籍をご参照ください。 アジャイルソフトウェア開発宣言 2001年2月に17名のソフトウェアの専門家がスノーバードに集まった。 これは、ウォーターフォールのような儀式的で効果のない重量級のプロセスの開発ではなく、効果のある軽量級のアプローチを広めるためのアジャイルソフトウェア開発宣言を作成するためだった。 アジャイルは小さなことをしている小さなプログラ
コンテナ向けデプロイツールMRSKを試してみる - Qiita
3行まとめ MRSKは「コンテナ時代のCapistrano（Capistrano for Containers）」的なデプロイツール。すごくDHHぽい。 $5くらいの素のcompute instanceがHerokuみたいに使えるようになる(ただしDBやS3やRedisは必要に応じて別途用意する前提、合わせて別インスタンスで立ち上げる機能もあり) 37Signalsではproductionで使ってるようだけどまだまだ荒削りなので、しばらくは一緒に開発したいくらいの勢いで使いたい人向け MRSKとは MRSKはRailsの創始者DHHが新しく作ったデプロイツールです。 初コミットは2023年の1月7日ということで真新しいプロダクトなのですが、中身を見るとあまり新しそうに見えないというか、今どきのクラウドネイティブな世界観から見ると正直懐かしい感じもあります。なんで今これが作られたのでしょうか
TypeScriptのnamespaceは非推奨ではない - Qiita
結論から 公式の TypeScript ドキュメントの何処にも namespace を非推奨と示唆する記載は無い。 尚且つ microsoft/TypeScript#30994(comment) で TypeScript チームのリード開発者である Ryan Cavanaugh 氏が述べているように将来的に廃止される事も無い。 TypeScript の namespace について調べると公式では無い記事や投稿で非推奨（deprecated）というワードが目立つ事、tslint や typescript-eslint を使用していると namespace の使用で注意されてしまう事などから非推奨と認識されてしまっていると推測する。 個人的に「非推奨」という強いワードは「使用するな」というメッセージ性を感じる。開発者同士の間で誤解を生みかねないため namespace は非推奨では無いと伝え
Prisma で Upsert Many はないのか - Qiita
ないです。 updateMany や deleteMany はあるのに・・・ ですが似たようなことを簡単に実現できそうです。 結論 公式の例をもとにすると複数の User 情報をまとめて Upsert したい場合は以下のようになるかと思います。 async upsertUserMany(userList: User[]):Promise<{count:number}> { // map関数でupsertのクエリを複数作成 const query = userList.map(user => ( prisma.user.upsert({ where: { email: user.email, }, update: { name: user.name, }, create: { email: user.email, name: user.name, }, }) )) // $transacti
これからのText to DiagramツールはD2で決まり！ - Qiita
この記事について ドメイン固有言語(DSL: Domain-Specific Language)の1つであり、Declarative Diagrammingの略であるD2言語の環境構築、および簡単な作図例を示したものです。 D2とは 2022年11月22日にオープンソースとなったドメイン固有言語です。MPL-2.0ライセンスの元公開されています。 Mermaid, Graphviz, PlantUMLとの比較を行えるサイトもD2の開発元であるTerrastructによって公開されています。 一部抜粋したものが次の表になります。 他のText to Diagramツールと比較して、D2では様々な機能が追加されていることが分かります。 特徴 D2 PlantUML MermaidJS GraphViz
2022年に生産性が向上したと思うmacOS用ターミナル向けツールやコマンド10選 - Qiita
株式会社ゆめみ Advent Calendar 2022 23日目の記事です。 はじめに 2022年も残りわずかとなりましたね。 今年一年を振り返ってみて、普段業務でよく使用しているmacOS用のターミナル向けのツールやコマンドを紹介したいと思います。 動作確認環境 生産性が向上したと思うmacOS用ターミナル向けツールやコマンド 1. Fig.app ターミナルでコマンドの自動補完を行うGUIアプリです。ディレクトリ名やファイル名を自動で補完してくれたり、gitの各種コマンドやブランチ名等も補完してくれます。一般的なコマンドは補完が効くので、かなり生産性向上に寄与してくれました。 見た目は以下のような感じになります。 2. Starship BashやZsh、Fish等で使用できるカスタマイズ可能なシェル用プロンプトを提供するツールです。 細かく調整しなくても、いい感じのプロンプトにして
HTMLのInput要素のinputmodeのスマートフォンのキーボードがどのように表示されるを整理してみた - Qiita
はじめに この記事はZOZOテクノロジーズ #4 Advent Calendar 2020 の15日目の記事です。 昨日は @TAKAyuki_atkwskさんのALB で gRPC を利用する on EKS - Blogaomuでした。 概要 タイトルの通り、HTMLのInput要素のinputmode属性を指定したときにスマートフォンのキーボードがどのように表示されるかを整理してみた記事です。 調査をしている方の参考になればと思い、記事にしました。 書いてあること inputmodeのざっくり説明 サンプルコード inputmodeで表示されるiOSとAndroidのキーボード表示 書いていないこと inputmodeの詳細な説明 想定しているキーボードを表示させるための工夫 内容 inputmodeとは？ その名の通り、input要素の入力時に表示されるソフトウェアキーボードの種類を
機械学習未経験の大学生が1週間でツイートの類似度を評価するシステムを作った話 - Qiita
はじめまして こんにちは。カトウです。この記事は、機械学習が気になるけど研究するほど詳しくない人が独学で成果物作るまで頑張った記録です。 そういえば、前に頭がおかしい時に書いたgo getの記事はおかげさまでSEO 4位(11/26)なので引き続き頑張ります。 今回のテーマは ツイートの類似度を評価するシステムを１週間で作ってみました！！ です！ というわけで、モデル選定から成果物を出すまでのフローを共有したいと思います。 ツイートについて ツイートは140字以内でテキストデータだけであると仮定しまっす。 ツイートを分解する ツイート(文書)は単語によって構成されています。今回は、ツイートを単語単位で分解します。 ツイートをどうやって評価するか？ 単語のベクトル(あとで説明する)を足し合わせて単語の数で割り、ベクトルの平均値をツイートのベクトルにします。 比較したい2つのツイートベクトルを
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」 - Qiita
そのファイル、本当に hooks/・utils/ に入れるんですか？ ―― React プロジェクトを蝕む「見かけ駆動パッケージング」設計アンチパターンReact 結論 (2023/06/03 追記) React の開発においては、 コロケーション Co-location の原則に従って、ファイルをディレクトリごとに分類しましょう。チームメイトや将来の自分にとって分かりやすいコードベースになります。 スキット「書くときは楽だけど...」 == 某日 == 太郎くんの今日のタスクは、「トーストを作る」です。 イメージ図 太郎くん 「コンポーネントを作るから..」 「ファイルの場所は components/Toast.tsxでええか。」 「useState でローカルに状態管理して、表示を切り替えればええやろ。」 太郎くん「ヨシ！」 この記事は、拙スクラップの一項目をモノローグ形式で分かりやす
【絶対に観るべき】英語のYoutubeチャンネル集【プログラミング】 - Qiita
こんにちは。masakichiです。 わたしはプログラミングの学習をしたり、情報収集をする時に好んで動画を閲覧することが多いです。 そんな中、最近英語圏のYoutubeチャンネルのクオリティが有料級並みに高いことに気づきドハマりしています。 ぜひ、プログラミングを学ぶ同志にも視聴してほしいと思い、おすすめのYoutubeチャンネルをまとめました。 なお、わたしはフロントエンドを主としていますので、紹介するチャンネルにも偏りがあります。予め、ご了承のほどよろしくお願いいたします。 The Coding Train 所感 スネークゲームやパズルゲームなどクリエイティブなチュートリアルがたくさんあるチャンネルです。運営者が教育の仕事もしているようなので、説明がわかりやすいと思いました。また、語学学校の先生みたいなノリで喋るので、聞き取りやすく親しみを感じることができると思います。 技術範囲 p5
import * as 構文とパフォーマンス最適化 - Qiita
JavaScriptには、import * as という構文があります。これは、インポート先のモジュールの中身全部をオブジェクト（モジュール名前空間オブジェクト）として取得できる構文です。 import * as mod from "./some-module"; console.log(mod.foo, mod.bar); たまに、「この構文を使うとTree Shakingが効かなくなる」といった説明が見られることがありますが、必ずしもそうではありません。そこで、この記事ではimport * as構文とパフォーマンス最適化に関連する正しい知識と、その背景をご紹介します。 webpackで検証してみよう Tree shakingを行うのはモジュールバンドラであることが知られています。そこで、webpackを使って色々と構文を検証してみましょう。今回は次のような設定を用います。これは最適化を
intelliJでプロジェクト環境変数の設定 - Qiita
概要 新しいプロジェクトに配属された際にプロジェクト固有の環境変数を設定する必要があると思います。 そのintellijでの設定方法メモです。 おそらくwindowsも変わらないと思いますが、デモではMacを対象にしています。 設定方法 メニュー preference > Build,Execution,Deployment > Build Tools > Maven > Runnerを開く Environment Variables の右端「...」をクリック 開いたウィンドウ下の+より追加していく 以上 ここで設定した変数は、Runで設定するMavenプロジェクトの環境変数に自動的に設定されます。 Runの種類ごとに設定したい場合は、RunのEdit Configuration よりRunごと同様の設定を行なってください。
【CTO meetup】Rust,Go,Elixir,Kotlin次世代言語の魅力をCTOが語る - Qiita
参加したイベントのメモです。 イベント概要 【CTO meetup】Rust,Go,Elixir,Kotlin次世代言語の魅力をCTOが語る 2018/04/12(木) 19:00 〜 23:00 https://flexy.connpass.com/event/82063/ 言語選定について サーバーが2種類あった。 使う言語を統一していこう→トップダウンでElixirに決まる。 1200台のサーバーを4人で運用。自動化しないと無理。 →GOで自動化（現場発信） Elixir使いたいとは思っていたが、ずっと使えずに居た。 Railsで何のチューニングもなしだとパフォーマンス問題。 →Elixirだと何のチューニングもなくても10倍は違う。 APIサーバー ユーザー情報保存 ユーザーのストレージ情報 書き換え用API マルチバトルサーバー ずっと接続しっぱなしのサーバー。 言語はC#, R
gRPC status codeの一覧 - Qiita
HTTPのステータスコードにあたる概念がgRPC Codeであり、以下で定義されている。 https://github.com/googleapis/googleapis/blob/master/google/rpc/code.proto 例えばGo言語だと以下にprotoから生成されたコードがある。 https://github.com/grpc/grpc-go/blob/master/codes/codes.go 一覧 適当に翻訳していく。 OK = 0 エラーなし。成功を返した。 HTTPだと 200 OK CANCELLED = 1 処理がキャンセルされた。通常は呼び出し側によるキャンセル。 HTTPだと 499 Client Closed Request ※Lを2つ重ねるスペルなことに注意。後述 UNKNOWN = 2 不明エラー。他のアドレス空間から受け取ったステータスを、適切
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
もうalt属性で迷いたくない - Qiita
