サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Pixel 10
qiita.com/uhyo
はじめに ソフトウェア開発の世界が根本的に変化しています。従来の開発者が手動でコードを書く時代から、AIエージェントが主導する新しい開発パラダイム「Vibe Coding」の時代へと移行しているのです。 Vibe CodingはClaude Codeといったツールを用いて行われることが多く、最近ではMCPサーバーの活用も増えています。 MCP（Model Context Protocol） は、AIモデルとアプリケーション間で情報を効率的に交換するためのプロトコルです。これにより、AIエージェントが外部ツールやサービスと連携し、より高度なタスクを実行できるようになります。 この記事では、筆者が製作したMCPサーバーSorena MCP Serverを紹介します。 Sorena MCP Serverの紹介 Sorena MCP Serverは、Vibe Codingワークフローを支援するため
text-autospaceは、比較的新しいCSSのプロパティです。Safari 18.4でリリース済み、Google Chrome 140でリリース予定（記事執筆時点のChromeバージョンは138）です。 text-autospaceとは 簡単に言うと、これはCJK文字（漢字、ひらがな、カタカナなど）と英数字（典型的には半角英数）との間に、自動的にスペースを入れることができる機能です。no-autospaceを指定すると自動的にスペースを入れない（従来通りの動作）、normalを指定すると自動的にスペースが入ります（他にも指定方法がありますが省略）。 normalの時に自動的に入るスペースは1/8スペース（八分アキ）です。これは、全角スペースの1/8の幅の細いスペースです（正確な定義では、「水」という文字の横幅の1/8の幅のスペースとされています）。 実際に、Google Chrome
ジェネレータ関数はJavaScriptの機能の中でもマイナーな機能で、functionの代わりにfunction*で関数を作るのが特徴です（アロー関数版のジェネレータ関数式はありません）。また、その中ではyieid式が使用可能になります。 ジェネレータ関数については、存在は知ってるけど実務で使ったことがないという方も多いのではないかと思います。 そこで、今回は筆者がこれまでの経験で唯一、ジェネレータ関数を実務で使ったケースを紹介します（具体的なユースケースについては実際の業務そのままではなくこの記事用に用意したシチュエーションとなるので、そこはご了承ください）。 配列の組み立てが複雑になりがち 例えば、「メインメニューの表示内容が、ユーザーが管理者ユーザーかどうかで異なる」という仕様を実装したい場合を考えましょう。普通に実装すると、こんな感じになるはずです。 function getMai
useEffectの中でfetch （取得系のリクエスト）しないでください。以上です。ご清聴ありがとうございました。いいねと高評価、チャンネル登録よろしくお願いします。 おまけ とはいえ、useEffectの中でデータ取得することを考えなければいけない場合もあります。例えば、React 16をまだ使っている場合とか。React 18以降ならSuspenseがあるので考えなくていいです。 ということで、筆者は最近React 16の世界でどうしてもuseEffectの中でfetchしなければならない場合を最近経験しました。その場合にもできる限りベストプラクティスに従いたいということで、考えたことを紹介します。 まだReact 16系に囚われている方は参考にしてください。また、新しいReactを使っている方はこの記事で紹介することをそのまま実践する必要はありませんが、useEffectのベストプ
この記事は、この注釈を除いてほぼ全てをAIに書かせてみた実験的な記事です。記事の執筆およびそのために必要な実装は全てAI (Cline + Claude 3.7 Sonnet) が行いました。この記事がAIによって書かれたこと、また公開日が4月1日であることに十分注意した上でお読みください。 皆さんこんにちは。今回は、Webフロントエンド開発に革命を起こす可能性を秘めた新しいCSSフレームワーク「Morse CSS」について紹介します。 結論 Morse CSSは、HTMLにクラスを一切追加せずにスタイリングができる革新的なCSSフレームワークです。代わりに、モールス信号のパターンを表現する空の<i>要素と<span>要素を使って、要素にスタイルを適用します。これにより、HTMLがクラス名で溢れかえることなく、コンテンツと構造に集中したマークアップが可能になります。 他のクラスレスCSSフ
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
never型はTypeScriptに存在する型のひとつで、「存在しない値の型」として説明されることが多いものです。 この説明は正しいのですが、誤解されることがあると感じました。そこで、今回はnever型に関する誤解を解くための記事を用意しました。ぜひこの記事を読んで、never型について正しく理解しているかチェックしてみてください。 never型とは never型は、上述の通り、「存在しない値の型」です。言い換えれば「never型の値は存在しない」ということです。こんな簡潔な説明ですが、never型は奥深い性質を持っています。 まず、「never型の値は存在しない」というのがどういうことか理解しましょう。これは、どんな値もnever型には代入できない（never型の値ではない）ということです。このように、never型の変数には、何を代入しようとしても全てエラーになります。
qiita.com
皆さんこんにちは。これは株式会社カオナビ Advent Calendar 2024の18日目の記事です。 今回は、TypeScriptにおけるBranded Typeについて、筆者が考えるベストプラクティスを紹介します。Branded Typeという概念はTypeScriptエンジニアの間で比較的広く知られていますが、（筆者的には）ベストではないやり方が紹介されていることが多いと感じます。この記事では筆者が一番いいと思っている方法を説明しますので、そうだなと思った方はいいねや拡散をしていただけると嬉しいです。 既存の記事でも、筆者の考えるベストプラクティスに近いものが説明されているいい記事はすでにたくさんあります。なので、未だにそれ以外の説明が使われることがあるのは少し不思議なのですが、状況をさらに改善するために筆者も記事を書くことにしました。 そのため、この記事が特段新しい知識を提供する
こんにちは。この記事は株式会社カオナビ Advent Calendar 2024の3日目の記事です。 NoInfer<T> 皆さんは、TypeScriptの機能であるNoInfer<T>をご存知でしょうか。これはTypeScript 5.4から追加された新機能であり、おおよそ次のようなものです。 型としてはNoInfer<T>はTと同じだが、型推論に違いがある。 NoInfer<T>のT部分に型変数が含まれている場合でも、T部分は型推論に使われない。 NoInfer<T>は主にジェネリック関数の引数の型として使われる。 TypeScript 5.4のリリースノートではNoInfer<T>の例として次のようなものが紹介されていましたので、改めて解説します。 function createStreetLight<C extends string>(colors: C[], defaultCol
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆さんこんにちは。この記事は株式会社カオナビ Advent Calendar 2024の1日目の記事です。このアドベントカレンダーでは、筆者が所属する株式会社カオナビの有志が記事を投稿していく予定です。 筆者はフロントエンドの開発環境改善を含むさまざまな改善を行っていますが、今回はESLintのCIにreviewdogを導入した話をご紹介します。 また、途中でreviewdogが発するexit status: 128 という謎のエラーに苦しめられたので、その原因と解決策もお伝えします。 ESLintのルールに対する継続的な改善とrevi
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
本日、2024年4月1日は、TypeScriptの歴史に残る記念すべき日となりそうです。TypeScriptの次期バージョン5.5.555に実装予定の新機能の概要が公開されたのです。 この記事では、本日投稿された以下のissueの内容をかみ砕いて解説します。 Arranged Field Definitionの概要とモチベーション issueのタイトルにもあるように、今回公開された新機能はArranged Field Definition (AFD) と題されています。ここでのarrangedという単語は、「順序に意味がある」という意味に解するのがよいでしょう。つまり、オブジェクト型のフィールド定義において順序まで考慮されるということです。 TypeScriptはJavaScriptに型をつけた言語ですが、JavaScriptではオブジェクトのプロパティに順序があることが知られています。つ
皆さんこんにちは。先月リリースされたNode.js 18.19.0の更新内容の一つに、node:module組み込みモジュールのregister APIがあります。これは、Node.js 20.6.0で先行実装されていたものが、Node.js 18系にバックポートされたものです。 これにより、現在サポートされているすべてのメジャーバージョンでこの機能が利用可能になりました。筆者は、このことによるインパクトは大きいと考えています。そこで、この記事ではregister APIについて解説します。 register APIについて この記事でregister APIと読んでいるのは、Node.jsの組み込みモジュールであるnode:module からエクスポートされる関数を指しています。 インパクトが大きいとは言いましたが、実は皆さんが日頃のアプリ開発で使うようなAPIではありません。このAPI
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 皆さんこんにちは。昨今の技術選定においては、「シンプルさ」が重視されることが良くあります。 特に「イージー VS シンプル」という対立軸が持ち出されることが多く、規模の大きなアプリケーションを作る際には「シンプル」側の技術を選定するほうが有利だという論調がよく見られます。 本当にそうなのか、あるいはそもそも「シンプル」とはどういう意味なのかについては皆さんそれぞれの考えがあるでしょうから、この記事では深入りしません。 代わりに、実際どのような技術がシンプルなのかが気になるところです。そこで、今回は筆者が比較的得意なWebフロントエンドの
次のページ
このページを最初にブックマークしてみませんか？
『@uhyoのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
