HonoでAPI付き雑React SPA最小
laisoさんが書いてたのほぼなんだけど Honoは文字列でもStreamでもなんでも返せるからサーバーサイドもReactで書けるし、tsconfig.jsonで適切に設定すればJSXなんでもいけるし、Viteのdev-serverがあるから、サーバーもクライントも同時に開発、ビルドできて、もちろんAPIを生やすのが得意で、雑React SPA環境（API付き！）作るのに向いてるよ。 作り方解説します。めんどい人はここにプロジェクト作ってるからclone、ダウンロードしてください。 まず、create-honoして、cloudflare-pagesのテンプレートを選ぶ。bunをパッケージマネージャーに使ってる。
HonoでAPIだけ作って素のReact DOMでSPAを書くアーキテクチャ
という構成を手軽に作れるようになっていて便利でした これを軸に素のReact APIを触って遊ぶ環境が作れそうです(Server APIもworkerdで動く範囲なら使えるかも?) とりあえず以下のソースコードでデプロイまでできるかを試しました プロジェクトのベースはnpm create hono@latestで作りました DEMO: https://hono-spa-react.pages.dev/ react react-dom @vitejs/plugin-react-swc をnpm installしています デバッグ しかしこの構成だと@hono/vite-dev-serverによるvite devは実行時エラーになり動きません(!) react-dom_client.js?v=f8955f15:11222 Uncaught Error: Objects are not vali
Prettier 3.0 をリリースしました
2023 年 7 月 5 日に Prettier 3.0 をリリースしました。Prettier 2.0 がリリースされたのが 2020 年 3 月 21 日だったので、実に 3 年以上ぶりのメジャーアップデートとなります。 本当はもっと早くこのブログを書きたかったんですが、やる気が出ずだいぶ遅れてしまいました。 この記事では Prettier 3.0 の主要な変更点を紹介します。 Prettier 3.0 の主要な変更点 Prettier 3.0 はメジャーアップデートということもあって大きな変更がいくつか含まれています。ここでは、そのうちユーザーに直接的な影響がありそうなものを紹介します。 ここで紹介する以外にも大きな変更はありますが、プラグイン開発者向けのものとか、Prettier のソースコード自体が全部 ECMAScript Modules で書かれるようになったとか、ユーザーから
Node.js に fetch がやってきた
ブラウザで実行される JavaScript とサーバーサイドで実行される Node.js では提供される API に違いがあります。 例えば DOM を操作する目的で使用する Document.querySelector() は Node.js に存在しないですし、反対にファイルを操作する目的で使用される fs モジュールはブラウザには存在しない API です。 リソースを取得するためのリクエストを実施する Fetch API も同様にブラウザにのみ存在する API でした。 Document.querySelector() のようなそもそも DOM の存在しないサーバーの API として提供されていないのわかりやすいですが、いかにも普遍的に使用できそうな Fetch() が Node.js の API に存在しないというのは初心者にとってはわかりづらく（確かに fetch() はブラウザ
JSON Web Token - Wikipedia
JSON Web Token（ジェイソン・ウェブ・トークン）は、JSONデータに署名や暗号化を施す方法を定めたオープン標準 (RFC 7519) である。略称はJWT。 概要[編集] JWTでは、トークン内に任意の情報（クレーム）を保持することが可能であり、例えばサーバーはクライアントに対して「管理者としてログイン済」という情報を含んだトークンを生成することができる。クライアントはそのトークンを、自身が管理者としてログイン済であることの証明に使用することができる。トークンは当事者の一方（通常はサーバー）または両方（もう一方は公開鍵を提供する）の秘密鍵により署名されており、発行されたトークンが正規のものか確認することができる。 JWTのトークンはコンパクトな設計となっており[1]、またURLセーフであり[2]、特にウェブブラウザでシングルサインオン (SSO) を行う場合に使いやすくなってい
TypeScriptのdeclareやinterface Windowを勘で書くのをやめる2022
おことわり 個々の関数や変数に正しい型をつける話はしません。TypeScript HandbookのDeclarationの章などを読むことをおすすめします。 かわりに、本稿では関数や変数の型宣言をどこにどう置くべきかの指針を与えます。 モジュールとスクリプト declareを正しく使うにはまずモジュールとスクリプトの区別を理解し、意識することが大切です。 ブラウザやNode.jsは外部からの指定でモジュールとスクリプトを区別しますが、TypeScriptでは原則としてファイルの内容でモジュールとスクリプトを区別します。 import 宣言または export 宣言が1つ以上あればモジュール。 CommonJSモジュールの場合はTypeScript専用構文である import = 宣言、 export = 宣言を使う。 それ以外の場合はスクリプト。 ただし、JavaScriptファイル (
GitHub - type-challenges/type-challenges: Collection of TypeScript type challenges with online judge
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応
JavaScriptランタイムのBun、インストール不要の実行ファイル生成が可能に。Webpackより200倍以上高速とするバンドラがβ版、Puppeteerにも対応 サーバサイドで実行可能なJavaScriptランタイム「Bun」は、5月に登場したバージョン0.6で、Bunをインストールすることなく、配置することでアプリケーションを実行できる単独の実行ファイルを生成できる「bun build」機能が搭載されました。 同じくバージョン0.6で高速なバンドラ「Bun Bundler」もβ版となり、6月に登場したバージョン0.6.7ではDiscordのボットを操作するDiscord.jsやWebブラウザを操作するPuppeteerなどの動作も確認されています。 下記はBunの開発者であるJarred Summer氏のツイート。 Standalone executables are coming
JavaScript (TypeScript) のMapをObjectに変換する - GAミント至上主義
TypeScriptで素のObjectよりMapの方がTypeScriptと相性がよく使う機会が増えてきたけど、レスポンスに変換するときなどはObjectに変換する必要があったのでメモ。 ぐぐったらreduceとか使う古いのが検索上位に出てきてしまうが、 Map.prototype.entries()をObject.fromEntries()に渡すというシンプルな組合わせでできる。 Map - JavaScript | MDN Object.fromEntries() - JavaScript | MDN 以下はChromeのconsoleなのでJavaScriptで試したけどTypeScriptでも同じようにできる。 const map = new Map() >undefined map.set(1, 'one') >Map(1) {1 => 'one'} map.set(2, 'tw
lizod: 1kb 未満の zod の精神的後継
作った。 lightweight-zod だから lizod。 npm install lizod -S で使える。 tl;dr 各種フロントエンドや Cloudflare Workers で zod のビルドサイズが邪魔になっている メソッドチェーンと便利なユーティリティを全部捨てた zod 風のバリデータを作った zod の 57kb に対して lizod は 1kb 以下 これが動く // Pick validators for treeshake import { $any, $array, $boolean, $const, $enum, $intersection, $null, $number, $object, $opt, $regexp, $string, $symbol, $undefined, $union, $void, type Infer, type Valid
SequelizeでJSONフィールドをupdateする場合はsetメソッドを使う : akiyan.com
SequelizeでJSONフィールドをupdateする場合はsetメソッドを使う 2022-02-02 nodejsのSequelizeで、MySQLのJSONフィールドをupdateしようとしてドハマリしたのでメモ。 DataTypes.JSON なフィールドは、create時はそのフィールドにobjectを入れるだけで保存できるが、update時はsetメソッドを通してsaveしないと更新できない。 これは更新できない const hoge = await models.Hoge.create({ jsonField: { foo: 123 } }) hoge.jsonField.bar = 456; await hoge.save(); // jsonField.barは保存されない これは更新できる const hoge = await models.Hoge.create({
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか
Cloudflare WorkersがNode.js API互換の提供を発表。Bun、Denoなどに続く対応により、Node.js APIはサーバサイドJavaScriptの事実上の標準になるか Cloudflareは、エッジでJavaScriptを実行できるサービス「Cloudflare Workers」において、Node.jsのAPI互換機能を提供すると発表しました。 node.js APIs have officially landed in Cloudflare Workers — no polyfills required. We've added AsyncLocalstorage, EventEmitter, Buffer, assert and util, with more on the way soon.https://t.co/8CkPZkS3Yb — Cloudfl
TypeORM(with Docker)の環境構築からマイグレーション実行までの流れ - Qiita
TL;DR この記事では、TypeORMのサンプル作成を題材に、Dockerコンテナへの環境構築からマイグレーション実行までの流れを紹介します。 なお、本記事は以下の参考サイトの内容をもとに、記事執筆時点での変更点（実行するコマンドなど）を加味したものになります。 TypeORMを使って、Express + Docker + MySQLの環境を構築する 記事執筆時の動作環境は、以下です。 TypeORMとは TypeScript(およびJavaScript)で使用可能なORマッパーです。 GitHubのレポジトリはこちら 環境構築～コンテナの起動確認 開発用のフォルダを作成します。
Announcing TypeScript 5.0 - TypeScript
Today we’re excited to announce the release of TypeScript 5.0! This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster. We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified con
TypeScriptではじめるChatGPT API：入門から一歩進んだテクニックまで - Uzabase for Engineers
NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く
useCallbackはとにかく使え！ 特にカスタムフックでは - uhyo/blog
Reactには、パフォーマンス最適化のためのAPIがいくつかあります。具体的にはReact.memo、useMemo、そしてuseCallbackです。 React.memoで囲まれた関数コンポーネントは、propsが以前と変わっていない場合に再レンダリングが抑制されます。 また、useMemoやuseCallbackは、関数コンポーネント内での値の再計算を抑制する効果を持ちます。 これらは最適化のためのツールなので、「過度な最適化」を避けるように啓蒙する言説がよく見られます。 すなわち、ちゃんと本当に最適化のために必要なところにだけこれらを使おうということです。 特に、React.memoはpropsが以前と変わっているかどうかを判定するためのオーバーヘッドがあるし、useMemoやuseCallbackもフック呼び出しのオーバーヘッドがあります。 意味がないところでReact.memo
AppleやNetflixなどの大企業も使用するオープンソースライブラリ「core-js」をたった1人で維持する開発者が「もう限界だ」と支援を求める
オープンソースのJavaScriptライブラリである「core-js」は、古いブラウザでもJavaScriptの最新機能を使えるようにするPolyfill(ポリフィル)として強い人気を誇り、オープンソースのJavaScriptトランスコンパイラであるBabelにも組み込まれています。AppleやNetflix、Spotify、Pornhubといった大企業を含む多くのウェブサイトに利用されている「core-js」のメンテナンスをたった1人で行う開発者のDenis Pushkarev(zloirock)氏が、ついに家族を養えなくなったとして支援を求める記事をGitHubで公開しました。 core-js/2023-02-14-so-whats-next.md at master · zloirock/core-js · GitHub https://github.com/zloirock/cor
TypeScript | Sequelize
We're working hard on making Sequelize a breeze to use in TypeScript. Some parts are still a work in progress. We recommend using sequelize-typescript to bridge the gap until our improvements are ready to be released. Sequelize provides its own TypeScript definitions. Please note that only TypeScript >= 4.1 is supported. Our TypeScript support does not follow SemVer. We will support TypeScript rel
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - checkly/puppeteer-examples: Puppeteer example scripts for running Headless Chrome from Node.
OpenAI Platform
