Postmanでは、将来全てのものがAPIで繋がると考えています。 “APIファーストの世界“コミックを読むことで、何故、またはどのようなAPIファーストの世界が実現するのかが理解できます。

概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発

7月7日、Denoの開発者マーヴィン・H氏が「JavaScriptエコシステムを加速する（Speeding up the JavaScript ecosystem）」と題した記事を公開した。この記事では、TypeScriptの新機能「isolatedDeclaration」が、JavaScript / TypeScriptエコシステムを変革する可能性について詳細に紹介されている。本記事ではその内容を簡単に紹介する。 本記事は、以下のエキスパートの皆様に監修していただきました: 古川陽介さん（Japan Node.js Association代表理事） うひょさん（株式会社カオナビ　フロントエンドエンジニア） npmパッケージングの問題点 現在npmでのパッケージングプロセスは相当に複雑である。モジュールをnpmに公開しようとする開発者は、CommonJS対ESMの問題や、多くの設定調整を行

はじめに 最近自分がNext.jsの環境構築、設計を担当する機会が増えました。 ディレクトリ構成が固まってきたので一つの案として参考になれば幸いです。 こんな方におすすめ！ Next.js App Routerを使って小規模開発(個人開発含む)を行いたい方 Next.js App Routerに関してなんとなく理解したけどディレクトリ構成で迷ってる方 featuresになんとなく興味のある方 目次 featuresとは何か 構成案 appディレクトリ featuresディレクトリ componentsディレクトリ hooksディレクトリ utilsディレクトリ constantsディレクトリ 実際に実装してみて featuresとは何か アプリケーション内で独立した機能として識別できる要素のこと。 中にはUIコンポーネント、ロジック、スタイルなどが入る。 1行でまとめるのであれば ロジック

Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応

GraphQL スターターパック | Prisma + NestJS + Next.JS製 個人ブログサイトをCloud Runで運用しよう

はじめに 技術スタック eScanチームにおけるGraphQLの使い方 開発フローの工夫 N+1問題の対応と注意点 エラーハンドリングの工夫 モニタリングの工夫 ドキュメンテーションを必須化するための工夫 その他の取り組み 振り返り 良かった点 難しかった点 今後の展望 最後に はじめに こんにちは、enechainでソフトウェアエンジニアをしている小沢です。 私が所属しているチーム(以降、eScanチーム)では、eScanという電力会社向けのリスクマネジメントシステムを開発・運用しており、その中でGraphQLを採用しています。すでにGraphQLを採用するメリット・デメリットについて様々なところで語られていますが、eScanチームでもオーバーフェッチが解消できる点、1リクエストで必要なデータをフェッチできる点などのメリットを享受するために採用しています。 今回は実際にGraphQLを採

はじめにソースコードの管理にBacklogのGitリポジトリ、CI/CDにAWS CodePipelineを用いたかったのですが、CodePipelineの送信元にBacklogは指定出来ません。なの...

今回のTechFeed Experts Nightは、「 フロントエンドアーキテクチャの現状と未来 」がテーマです。 プログラミングのエキスパートたちが、 フロントエンドアーキテクチャのトレンドからマニアックまで15分間のLTに凝縮！それらをネタに、エキスパートたちが語り合う！ エキスパートも、エキスパートを目指す方々も、楽しめること必至の60分！ セッション開始通知機能もあるので、見たいところだけ見れる！ さあ、技術をネタに盛り上がろう！🍻 TechFeed ❤ Developers & Communities

Webフロントエンド版DX Criteria (v202402)/プロダクトのユーザー体験と変化に適応するチームのためのガイドライン

React 19 Betaがリリースされましたね！ このブログでもReact19の新機能を解説して行こうと思います。 今回は、use Hookです。 公式ドキュメントには、以下のように書かれています。 use はプロミス (Promise) やコンテクストなどのリソースから値を読み取るための React フックです。 use というシンプルな名前、 何なんでしょうか？ Bing Image Creatorが生成した画像を使っています use Hookとは use Hookには大きく2つの目的で使われます。1つ目はコンテクスト(Context)の読み取りです。そのためには、以前からuseContext Hookがありましたが、今回のuseも同じ目的で使えます。 ただしuseContextはHooksの基本ルール通りに、関数コンポーネントのトップレベルで使う必要があります。if文の中では使えま

In our React 19 RC Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we’ll give an overview of the new features in React 19, and how you can adopt them. What’s new in React 19 Improvements in React 19 How to upgrade For a list of breaking changes, see the Upgrade Guide. What’s new in React 19 Actions A common use case in React apps is to perform a

Flutterアプリのユーザー認証システムにAmazon Cognitoを使う(OAuth 2, Google, LINEなど)AWSDartOAuthcognitoFlutter Special Thanks! : @to-jiki と共同でこの記事を作成しました. 結構長いのでご注意！ Flutterを使ったアプリで, ユーザー認証のシステムを作りたいと思い, バックエンドをAWSで実装する必要があったため, Amazon Cognitoを使うことになりました. ただ, Flutter+Firebaseの情報は結構出てくるのですが, Flutter+Amazon Cognitoの方があまり出てこなくて困ったのでメモ程度にまとめたいと思います. 個人的に結構困った, Flutter部分も結構詳しめに書いています. 1つ注意していただきたいのが, FlutterもAWSも初心者の状態でいろ

Intro WHATWG が定義する Fetch API は、出たばかりの仕様では、途中でのキャンセルや、プログレスイベントの取得が含まれていなかった。 しかし、後の更新で fetch 結果の Response Body が WHATWG Stream API を実装することになったため、現在の仕様ではプログレスを取ることもキャンセルをすることも可能となっている。 今回は、こうした API のアップデートについて記す。 Update 最初の公開時には、以下のように書いていた。 「XHR ではできるが Fetch ではできない」ことが、仕様上は無くなったことを意味する。 しかし、現時点で仕様としてまだ出来ないことがあることが判明した。 Upload の Progress これに伴い、記事の一部を修正した。 Fetch 最新の Fetch の仕様は以下で確認できる。 Fetch Spec 仕様

Server Sent Events (SSE)は、サーバからクライアントにリアルタイムで情報をプッシュするための技術です。この記事では、そのフロントエンドでの実装方法をいくつか紹介します。 完成品 今回実装したものは下記に収めてます。Next.jsを使っています。 github.com 下記で実際にブラウザで動作確認できます。 https://server-sent-events-example.vercel.app ChatGPTのようなUIを実装するのに色々な方法を試しました。 SSEのサーバー側のコード サーバーサイドの設定は以下のとおりです。 SSEをサポートするエンドポイントを作成します。 レスポンスのヘッダーに'Content-Type': 'text/event-stream'を設定し、接続を開いたままにします。 必要に応じて、特定の間隔でデータを送信します。 pages/

Hono で Server-Sent Events によるストリーミングを実装する 2024.02.01 Server-Sent events（SSE）は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信、HTTP で通信するという特徴があります。この記事では Hono を使って OpenAI API を使ったテキスト生成をストリーミングする方法を紹介します。 Server-Sent Events（SSE） は、サーバーからクライアントに向けてイベントをストリーミングするための仕組みです。WebSocket と比較すると、サーバーからの単方向の通信になるという特徴があります。また HTTP で通信するため、WebSocket のように独自のプロトコルではないため、運用の負担が少ないというメリットがあり

この記事は、以下の記事で述べたライフタイムのうち、 2. レンダー, 3. コンポーネント に関連する内容です。 両方を合わせて読むと、より理解が深められると思います。 はじめに: 止まらないデータの流れを意図的に止めることが可能 React の、特に Function Component の良いところといえば「ステートを更新したのに表示が更新されない」ようなバグを防ぐという思想が強く押し出されていることですよね？（圧） React の元開発者である Dan Abramov 氏のブログの「壊れにくいコンポーネントを書く」ことについての投稿を見れば、そのような側面がよく分かると思います。 const SomeComponent: FC = () => { const [count, setCount] = useState<number>(0); // 再レンダリングのたびに、下の式が実行さ

2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/

はじめにSocket.IOとは記事の範囲インストール使用例：サーバ編使用例：クライアント編最後に参考 はじめに 以前、対戦型オセロ・ゲームを作ってこのサイトで公開しようと試みました。結局、開発環境ではReactのホット・リロードでサーバ側の変数も初期化されてしまい、テストがうまく出来ずに途中で諦めてしまったのですが、、、 何も残せないまま終わるのも悔しいので、せめてその中で覚えたことを共有していきたいと思います。 オセロでは相手の操作に合わせてデータを更新する必要があるので、Socket.IOのようなパッケージを使って、サーバとクライアントで双方向通信を行う必要があります。 Express.jsのようなWebフレームワークを使えば、Socket.IOの実装は比較的簡単にできますが、Next.jsの標準Webサーバ機能で使おうとすると、ちょっと勝手が変わってきます。 今回はNext.jsの標