ChatGPTっぽいサービスのプロトタイプをChatGPTを使ってHTMLとJavascriptで作ってみた - Qiita
ChatGPTっぽいサービスのデモを速攻で見せるために、サーバーとか気にしなくてもいいように、HTMLとJavascriptで作ってみた。 それも、ChatGPT（GPT-4）と対話して。 ChatGPTとの対話 まず、最初のプロンプト # 命令書: あなたは優秀なフロントエンドエンジニアです。 指示の通りHTMLのサンプルコードを書いてください。 # 制約条件 ・HTML , CSS , Javascript は１つのHTMLファイルにしてください ・OpenAIのAPIキーは 999999999 としてください ・どんなに長いコードでも必ず一つのhtmlコードブロックに収めてください。 # 指示 ・ChatGPTと同様の機能のあるウェブアプリを作ってください 必要最低限 のをすぐ作ってくれた。 APIの呼び出し方法がちょっと違ってたので、const response のJSONのところ
2023-08-03のJS: Riot.js v9.0.0、Firefox 116、React Server Componentsへの移行
JSer.info #654 - Riot.js v9.0.0がリリースされました。 Release Evergreen · riot/riot このリリースでは、Riot.jsとcompilerなどのバージョンを合わせるため、v8はスキップしてv9.0.0としてリリースされています。 Node.js 14/16のサポート終了、BabelでのTranspileをしないように変更、boolean属性の挙動変更などが含まれています。 Firefox 116がリリースされました。 Firefox 116.0, See All New Features, Updates and Fixes Firefox 116 for developers - Mozilla | MDN HTTP/2のアップロードパフォーマンスの改善、CSP3 external hashesをサポート。 FetchのgetRe
ReactとJavaScript: Reactと他のJavaScriptフレームワークの比較 - Qiita
React JavaScriptの利点と他のJavaScriptフレームワークとの優位性を探ってみましょう。以下の記事では、Reactを他のフレームワークと比較し、それぞれの技術の利点やメリットを理解することができます。信頼性と効率性を持つウェブアプリケーションを構築するための最適な選択肢を見つけるために、ぜひ読み進めてください。 Reactと他のJavaScriptフレームワークの比較 Cre: twire React JavaScript - Facebookの強力なJavaScriptライブラリ Reactは、ウェブ開発の分野でトップの技術の1つとなっています。Facebookによって開発され、Reactは高いパフォーマンスとコンポーネントの再利用性により人気を博しています。Virtual DOMを使用することで、Reactはアプリケーションのスピードとパフォーマンスを最適化し、実際
Reactパフォーマンスを最大70%向上させる!? Million.js入門 - Qiita
3. Million.jsの基本的な使い方 Million.jsの基本的な使用方法は、Reactのコンポーネントをblockという関数で包むだけです。以下に例を示します。 import { block } from "million"; function Lion() { return ( <img src="https://million.dev/lion.svg" /> ); } const LionBlock = block(Lion); 上記のように、Million.jsを使用すると、Reactのコンポーネントを高速化できます。 ただし、現時点ではUIコンポーネントライブラリと一緒に使うことはできず、またコンポーネントにpropsを渡す際にスプレッド構文が使えないなど、まだいくつかの制約が存在します[^1^]。 4. Million.jsでのパフォーマンス向上 Million.js
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
【2023年最新】JavaScript ES13の新機能6選！コード例付きで詳しく解説します！ - Qiita
もちろん、新しい記事に合わせて、全体のテキストを更新します。以下、新しい記事の内容です。 目次 はじめに 配列の新メソッド: .at() 新しいオブジェクトメソッド: Object.hasOwn() モジュールのトップレベルでのawait プライベートプロパティ宣言に # の使用 クラスのメンバ変数の簡単な設定 配列の末尾から要素を探す: findLast まとめ 1. はじめに みなさん、こんにちは！JavaScriptが2023年に導入されたES13の新機能についての最新情報をお届けします。新しいメソッドや構文が追加され、開発がさらに便利になりました。以下、詳細に解説していきます。 2. 配列の新メソッド: .at() 新しい .at() メソッドを使用すると、配列から特定の要素を簡単に取得できます。 const fruits = [ 'apple', 'banana', 'cherr
Denoのビルドツール「dnt」が、ESMとCommonJSのハイブリッドnpmモジュール作成に対応
7月31日、dntはESMとCommonJSのハイブリッドnpmモジュールを簡単に公開する方法を発表しました。 JavaScriptモジュールの作成と公開は依然として困難であり、多くの人が複雑なリリースパイプラインやわずかに異なるモジュール構文を持つ2つのコードのコピーを維持することに頼っています。 dntを使用することで、モジュールを一度書いてTypeScriptなどのモダンなツールで変換し、すべてのユースケースをサポートすることができます。 7月31日、dntはESMとCommonJSのハイブリッドnpmモジュールを簡単に公開する方法を発表しました。 JavaScriptモジュールの作成と公開は依然として困難であり、多くの人が複雑なリリースパイプラインやわずかに異なるモジュール構文を持つ2つのコードのコピーを維持することに頼っています。 dntを使用することで、モジュールを一度書いてT
2023-07-28のJS: Node.js v20.5.0、Bun v0.7.0、Redwood v6.0.0
JSer.info #653 - Node.js v20.5.0がリリースされました。 Node v20.5.0 (Current) | Node.js Test Runnerに--test-shardフラグの追加、node:eventsにaddAbortListenerを追加、fs.readFileSyncでUTF-8のファイルを読み込むときのパフォーマンスを改善などが行われています。 Bun v0.7.0がリリースされました。 Bun v0.7.0 | Bun Blog Viteのサポート、Worker APIのサポート、structuredClone()のサポート、AsyncLocalStorageのサポートが追加されています。 実行時のパフォーマンスを犠牲にメモリ消費量を抑えるbun --smolフラグのサポート、bun test --bail=<number>のサポート、Node
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に
JavaScriptのUIフレームワーク「Svelte 4」正式リリース。パッケージサイズが10MBから3MBへ大幅縮小、ハイドレーションコードも高速に JavaScriptのUIフレームワーク「Svelte」の最新版となる「Svelte 4」が正式にリリースされました。 https://t.co/9qz0sDglCe — Svelte 4 Ever (@SvelteSociety) June 22, 2023 Svelteは読みやすく簡潔なコードでWebアプリケーションのユーザーインターフェイスを構成できるフレームワークです。Stack Overflowの調査では開発者の人気が急速に高まっていることでも注目されています。 Svelteの最大の特徴はコンパイラであるということです。UIフレームワークは、なんらかのライブラリをアプリケーションに同梱することが一般的ですが、Svelteではコー
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］ CDNのエッジロケーションでJavaScriptランタイムを提供するサービスが相次いで登場しています。 代表的なものとしてCDNプロバイダのCloudflareやFasltyが提供する「Cloudflare Workers」や「Fastly Compute@Edge」などがあり、最近ではCDNプロバイダ以外からも「Deno Deploy」「Vercel Edge Runtime」などが登場しています。 これらに共通するのは、世界中に分散したデータセンターで稼働するサービスであること。そして、サーバサイドJavaScriptの実行環境が用意されていることです。 Vercelが提唱するエッジミドルウェア 現在インターネット上でサービスを提供する手段としてエッジロケーション
jQueryへの別れ：現代的な開発のための必須JavaScriptメソッド - Qiita
はじめに 私は長い間レガシーコードと共に仕事をしてきましたが、jQueryの重要性は依然として頻繁に話題に上がるトピックの一つです。ライブラリ自体は便利なままですが、それは別の時代のニーズを完璧に満たしていました。 現在、私たちは既にES2023について話していますが、過去にjQueryがカバーしていたほとんどの機能は、すでに2015年にリリースされたES6に取り込まれています。 ES6の標準は既に広範にサポートされており、96％のレベルに達しています（出典：caniuse.com）。そのため、特に要素の選択、スタイリング、アニメーション、データの取得などの基本的なタスクについては、ライブラリの使用を見直す良いタイミングかもしれません。 以下のトピックは、いくつかの標準的なjQueryのパターンと、それに相当するバニラJavaScriptでの手法を示す参考資料として役立つと思います。 要素
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
2023-06-01のJS: Parcel v2.9.0、Deno 1.34、State of Node.js Performance 2023
JSer.info #646 - Parcel v2.9.0がリリースされました。 Parcel v2.9.0 Release v2.9.0 · parcel-bundler/parcel exportsフィールドをopt-inでサポート、ESMで書かれた設定ファイルをサポート、ローカルプラグインをサポートされています。 また、デフォルトのminifyをSWCへ切り替え、--traceフラグで詳細なトレースデータを取得できるようになるといった変更も含まれています。 Deno 1.34リリース。 Deno 1.34: deno compile supports npm packages deno compileがnpm:に対応、deno.jsonでglobを指定できるように、IPアドレスに対するTLS証明書をサポートしています。 また、unstable APIとして Deno.createH
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from ~node_modules/react-native/index.js: - Qiita
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from ~node_modules/react-native/index.js: XcodeiOSreactnative Xcode 14.1にダウングレードして Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS エラーを解決する エラーに直面することは開発者の日常生活の一部ですが、この記事では特に混乱を招く可能性のある一つ、Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS エラーについて説明します。これはReact Nativeを使用してア
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新しいReactドキュメンテーション、SPA（Single-page application）の利用を中止 ー SPAに代わるアーキテクチャの採用を加速
typescript-eslint v6 アップデートガイド - Realtime JSer.info
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった
【ChatGPT無＋JavaScript】関数を作成したら、どうする？ - Qiita
