Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
Exhaustive branch checks with TypeScript - Jack Franklin
March 4, 2024Exhaustive branch checks with TypeScriptIt's very common when working with TypeScript that you will have a type that declares a list of values, such as an enum or union type: enum SupportedColour1 { RED, YELLOW, BLUE, } type SupportedColour2 = 'RED' | 'YELLOW' | 'BLUE'And then you will often have functions that need to run differently or return different values based on what variant i
import "./App.css"; import { Link, Route, Switch } from "wouter"; function Nav() { return ( <nav> <Link to="/">Home</Link> <br /> <Link to="/about">About</Link> </nav> ); } function Home() { return ( <div className="App"> <h2>Home</h2> <Nav /> </div> ); } function About() { return ( <div className="App"> <h2>About</h2> <Nav /> </div> ); } function App() { return ( <> <Switch> <Route path="/" compo
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
はじめに ファイルの末尾には改行を入れたほうが良いのでしょうか。 「ファイル 末尾 改行 POSIX」等で調べると、規格の観点から改行を入れた方がいいという話が出てくるのですが、今回はgitの仕組みの観点からも改行を入れたほうが良いという話をします。 GitHub上での末尾改行の警告 例えば末尾に改行のないこんなファイルが有るとし、commitしてGitHubにpushすると以下のような表示になります export function hello(name: string) { return `Hello, ${name}!`; }
マイクロソフト、初心者向け生成AI学習教材「生成AIアプリケーションの開発を始めるために必要な全知識を学べる12講座」を無償公開
マイクロソフト、初心者向け生成AI学習教材「生成AIアプリケーションの開発を始めるために必要な全知識を学べる12講座」を無償公開 コースの内容には、大規模言語モデル（LLM）がどのように動くかを理解する。「生成 AI と大規模言語モデルの紹介」、ユースケースに適したAIモデルを選択できるようにする「様々なLLMの調査と比較」、プロンプトの構造と使用法の理解のための「プロンプト・エンジニアリングの基礎」、埋め込み技術を利用したデータ検索アプリケーションを構築する「Vector Databasesを利用した検索アプリケーションの構築」、外部APIからデータを取得するためFunction Callingを設定する「Function Callingとの統合」など、入門的な内容から高度なアプリケーションの開発まで多岐にわたるレッスンが用意されています。 レッスン内容は日本語による説明と図で構成 各レ
1. 第3次AIブームの到来 米Google DeepMindが開発した人工知能（AI）の囲碁プログラム「AlphaGo」が世界トップレベルの実力を持つ韓国のプロ棋士、李世ドル（イ・セドル）九段に4勝1敗と大きく勝ち越したことが着火剤となり、2015年より第3次AIブームへと突入した。(ちなみにAIが誕生したのは1950～1960年代で第1次AIブームの到来) 1.1 余談になるがAlphaGo(4億円の知能)はなぜすごいのか？ AlphaGoがそれ以前のチェスや将棋のAIと異なるのは、 畳み込みニューラルネットワーク（CNN） を応用している点だ。このCNNはさらに強化学習を行い、自分自身と対局を数千万回も繰り返した。 間違っていたらすみません、、、、 1.2 ChatGPTによる生成AIのブーム ChatGPTに代表されるLLMは以前から開発競争が繰り広げられていた。 GPT1は201
Azure OpenAI Serviceについての日本語記事のまとめです。主に公式ドキュメント以外のブログやZenn/Qiitaの記事をまとめています。ボリュームが多いので、目次から気になる項目を選択してご覧ください。 ※長く使える知見のまとめにしたかったので一過性のニュース的な記事や内容が重複している機能紹介記事などは意図的に掲載していません。 この記事はGitHubで管理されています。まとめへの追加修正はプルリクエストまたはIssuesでお気軽にお寄せください！ また、以前に本記事をご覧いただき、そこからの差分を知りたい場合はGitHubのHistoryも併せてご覧いただけると把握しやすいかと思います。 概要 まずはここから Azure OpenAI Service を使い始める Azure OpenAI Serviceの概要から実際のリソースデプロイ、プレイグラウンドとAPIでの呼び
ぼくのかんがえたさいきょうのGAS開発手法2023
前提clasp の制約、Script API の考え方、Google Drive の考え方に素直に従うその条件下である程度モダンな開発環境での開発を目指す 可能ならコードは VCS で管理する（pull-req など）ドキュメントベースで共同作業に向いた手法で開発を進める特にカジュアルに始めやすい Google Apps Script は悪い意味での属人化まっしぐらになりやすい。これが長期間の業務に影響しないような、ワンショットのものなら別にそれでもよいが、これが誰かに引き継がなければいけないような状況が生まれると一気に地獄みが増してしまうので、そうなってしまう前により良い開発手法を考えておきたい。 考慮したことGAS は素朴に作ると Script 本体の構造がそれを利用する container （例えば Spreadsheet）のデータ構造などと密結合になってしまう。この状態のままコード
Whisper、ChatGPTを活用した、テキスト入力不要な新感覚メモ日記アプリの紹介と、開発における学び｜にょす
日常生活の中で生まれた「できごと」や「思ったこと」を、楽しく記録できるメモ日記アプリを開発しました！ しゃべったら、あとは丸投げして良い感じにメモを残してくれる「シャべマル」です！（笑） シャべマルの紹介具体的には、、 絵文字で見返せるメモアプリあんまりないですが、良いですよ…！音声入力でメモ内容を作成。かなり高精度な音声認識モデル（Whisper）を用いているので、想像以上にちゃんと文字起こししてくれます！ 「今日あったこと」など、日記として利用するのもオススメです。1日を振り返る機会になって、それが後から振り返りできるので、あの時こんなこと考えていたなー、といった発見につながるはずです！ そして個人的にここが目玉なのですが、文字起こしされたメモには、「タイトル」「絵文字アイコン」「感情アイコン」「カテゴリ」が自動で紐づきます！ これ何が良いかというと、圧倒的に見返しやすくなるんですよね
いまからわかる！ChatGPT活用プログラミング ChatGPT APIのFunction callingを使って、請求書の構造化データを抽出する 先月、OpenAIからFunction calling（関数呼び出し）機能がリリースされました。これが何なのか、何のために使うべきなのか、ちょっと見ただけでは分かりづらいと思います。 今回は請求書から情報抽出をするというよくありがちなケースを題材に、Function callingの利便性を示してみます。 Function callingとは OpenAIが2023年6月13日にリリースしたChat APIの追加機能です。主にできることとして以下の3つが挙げられています。 外部ツールを呼び出して質問に答えるチャットボットを作成する 自然言語を内部APIの呼び出しやSQLに変換する テキストから構造化データを抽出する たとえば天気予報と血液型
Function callingの登場 6/13ごろにOpenAI社から発表された新しいgpt-3.5-turboのインスタンスにFunction callingという機能が追加され話題を呼んでいます。このFunction calling、非常に強力な機能なのですが、仕組みがいまいちピンとこないといった方も多いのではないでしょうか。筆者もその一人で、ドキュメントを3回くらい読んでもしっくり来なかったのですが、実際にFunction callingを実装してみてなるほど、これは凄いな、となったので紹介します。 ここでは、具体的なソースコードを紹介しながら、実際に動作するサンプルを作っていきます。 TL;DR ソースコードだけ見られればいい！という方は以下へ https://github.com/canada/openai-function/blob/master/app.py ソースコードを
tl;tr ChatGPTの新機能「Function calling」はすごい。 今後注目される機能になっていくと思われる。 ChatGPTの新機能「Function calling」について 6/13のアップデートで、ChatGPTに新たな機能「Function calling」が実装 されました。 「Function calling」は、ChatGPTに「呼び出すことができる関数」を教えておく機能で、ChatGPTがこの関数を呼び出せるようになります。 この機能を活用すると、ChatGPTを経由することで、曖昧な指示でも関数が実行できるようになります。 「Function calling」の概要と可能性 概要 ChatGPTに呼び出せる「functions」をパラメーターとして渡します。 この状態で通常通りChatGPTに送信をすると、関数の呼び出しを要求するレスポンスが帰るようになり
【速報 : OpenAI APIがアップデートされました！！】GPT-4, GPT-3.5の0613版がリリース / GPT-3.5のコンテキスト長が4倍に / 新機能Function callingも追加 | DevelopersIO
Function callingは開発者向けとしては目玉の機能追加だと思います。 自身で定義した処理を組み込んだチャットが実現できる機能となっています。 文字での説明はちょっと難しいので、詳細は以降の試してみるでご説明致します。 試してみる それでは実際に動かしてみます。 環境 Google Colaboratoryを使います。 !python --version Python 3.10.12 openaiライブラリを入れておきます。 !pip install openai !pip freeze | grep -e "openai" openai==0.27.8 インポートおよびAPIキーを設定します。 import openai import os openai.api_key = "{sk-で始まるAPIキーを指定してください。}" とりあえず新しいやつを動かす 以下のコードで動かし
$ npm install @mizchi/declass $ npx declass input.ts # -o output.ts export class Point { x: number; y: number; constructor(x: number, y: number) { this.x = x; this.y = y; console.log("Point created", x, y); } distance(other: Point) { return Math.sqrt(Math.pow(this.x - other.x, 2) + Math.pow(this.y - other.y, 2)); } } export class Point3d { constructor(public x: number, public y: number, public z:
なぜ家事は紛争を呼ぶのか 私の周りも結婚・出産をする友人が増えました。 そこで必ずと言っていいほど上がる議題がこれ。 「夫（妻）がぜんっぜん家事をやらない」 日本で婚姻制度が発足してから早100年。 これだけ長い年月「夫婦」という形が取られているのに、なぜこんなにも初歩的な不満が世に蔓延するのでしょう。 私も妻と結婚して5年経ちます。 知人からの愚痴なども収集した結果、いくつかの原因が考えられました。 その１． 人は「自分が一番やってる」と思う生き物である これは私がサラリーマンとして働いてて出した結論です。 殆どの人が「自分は結構仕事してる」と思いがちです。（これはマジ） 少なくとも同等の仕事量だとまず間違いなく「自分のほうが仕事してる」と勘違いします。 そのため、仮に夫婦が全く同じ量の家事を分担してたとしても、 それが正確に見える化されない限り、必ず「俺(私)のほうが家事をやってる」と
こんにちは 堤です。 3月1日にChatGPTのAPIが公開されました。 openai.com APIが公開されたことでChatGPTを活用したアプリが色々登場して盛り上がっていますね！ 今回はPythonのみで簡単にWebアプリを作成できるStreamlitとChatGPT APIを組み合わせて簡単にAIアプリを作成する方法をご紹介します。 Streamlitについて StreamlitはフロントもバックエンドもPythonのみの記述でWebアプリケーションを作成できるフレームワークです。 streamlit.io Webアプリ作りたいけどフロントの知識が全くない。。という人でもUIが簡単に作成できるのでとても便利です。 データ可視化や機械学習モデルの共有がとても簡単にできるのでデータサイエンスの領域でよく使われています。 作成するアプリ 今回はこのChatGPT APIとStreaml
ChatGPT Bot を new Slack Platform で動かしてみた - LayerX エンジニアブログ
こんにちは、LayerX の Enabling Team の suguru です。 ChatGPT のAPIが公開されて、ものすごい勢いで Slack へのインテグレーションが始まりそうです。 API 利用する場合は、会話の内容が学習などに使われることはない、ということで、安心して利用できそうです。 LayerX でも、早速ChatGPTが応答してくれるボットを作ってみることにしました。 今回は new Slack Platform を使うことにしました。new Slack Platform は、Slack Cloud と呼ばれる Slack 側のサーバーでコードを動かす機能があります。Slack にコードをデプロイするだけで、サーバーの準備等をしなくても ChatGPT を自分たちの SlackBot として埋め込むことができます。 注 - new Slack Platform は執筆時
Get started with GPT for Sheets | GPT for Work Documentation
Get started by discovering two example use cases: translating text and extracting email addresses directly in your Google spreadsheet. You can follow along by copying our example template. Prerequisites Get ready to use the example template: Open the example template. Click USE TEMPLATE. The spreadsheet is copied to your Google Drive and opens in your browser. You can now edit it. Select Extension
クリックできるボタンを実装するとき、HTMLの何をよく使用しますか？ buttonタグ、もしくはdivタグ？ divを使用してはいけない理由、buttonを使用するときの注意点、場合によってはaがよい理由を紹介します。 Everything you didn’t know you need to know about buttons by Steve Sewell 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンの実装にdivを使用したときの問題点 ボタンをbuttonで実装する buttonのスタイルに関する問題点 buttonのスタイルを正しく設定する方法 フォーム内のbuttonの動作を修正する 他のページへのリンクに使用する場合はaタグで ボタンの実装をコンポーネントにする 終わりに はじめに クリックで
今回は、以下のアニメーションのように、Google スプレッドシートに情報を入力すると、ChatGPTの回答を自動的に取得してくれる関数の作り方をご紹介します。 サンプルのスプレッドシートも公開しますので、以下のリンクからよかったら見てみてください。 ChatGPT関数サンプル Google スプレッドシートに情報を入力すると、ChatGPTの回答を自動的に取得してくれる関数の活用事例です。
SWR v2 をリリースしました
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
モノリシックなRailsアプリケーションで、APIのエンドポイント毎にSLOを設定する - Repro Tech Blog
こんにちは、@r_takaishiです。今回は、モノリシックなRailsアプリケーションが提供するAPIについてエンドポイント毎にSLOを設定できるようにしたので紹介します。 解決したい問題 ReproではRailsアプリケーションが様々なAPIを提供しています。このとき、APIのAvailabilityやLatencyについて可視化して障害が起こっていないか、パフォーマンスが低下していないかを調べることがあります。また、APIについてSLOを設定し、サービスの信頼性を保ちつつ開発を行うこともあるでしょう。 Reproでも可視化やSLOの設定は行ってきました。しかし、それらの対象がALBのTargetGroup単位だったり、APIを提供するECS Service単位でした。このような単位だと、API全体についての状況は分かりますが、個々のAPIについての情報は得られません。例えばエンドポイ
細かすぎて伝わらない Slack 次世代プラットフォームよもやま話選手権 - JMDC TECH BLOG
みなさんこんにちは! プロダクト開発部分析システムグループの新保です。 以前からクローズドベータで公開されていた、Slackアプリを作るための新しいプラットフォーム……いわゆる「次世代プラットフォーム」が9月下旬にオープンベータになりました。 ちょうどチーム内の勤怠を管理するためのSlackアプリを作ろうとしていたところだったので、この次世代プラットフォームを全面採用し、色々使い込んでみました。この記事ではその開発過程でぶつかった様々な問題を書いてみようと思います。 ちなみに完成したアプリはこちら。出退勤を管理するためのメッセージを毎朝送ってくれる、雄鶏の Rooster くんです。 Roosterのメッセージ (黒塗りの部分にはメンバーのアイコンと名前が並んでいます) 注意 Slack次世代プラットフォームはオープンベータ版です。この記事はバージョン1.14.0をベースにしています。 最
Better together: AWS SAM CLI and HashiCorp Terraform | Amazon Web Services
AWS Compute Blog Better together: AWS SAM CLI and HashiCorp Terraform This post is written by Suresh Poopandi, Senior Solutions Architect and Seb Kasprzak, Senior Solutions Architect. Today, AWS is announcing the public preview of AWS Serverless Application Model CLI (AWS SAM CLI) support for local development, testing, and debugging of serverless applications defined using HashiCorp Terraform con
はじめに 今回の記事では、普段のプログラマーの開発の生産性を向上させてくれる画期的なWebサービスを18も紹介する。個人の独断と偏見で紹介しているので、今回の記事で紹介しているものはあくまで一例にすぎない。 知っているだけで開発の生産性を急激に高めてくれるWebサービスは存在する。今回の記事を通して1つでも気になるWebサービスを見つけることができれば非常に幸いである。 CSSGradient CSSで作れるグラデーションをまとめたサイト。1,000以上の種類から自分の好みのグラデーションを選べる。 Fontjoy 自分が制作するWebサイトに最適な組み合わせのフォントを選ぶ上で役立つ。主にデザイナー向けに作られたWebサイト。ポートフォリオサイトに使うフォントを選ぶ際に参考になるだろう。 Readme.so Markdownとテンプレートを活用して、自分が開発したプロジェクトのREADM
この記事について JavaScriptはお好きですか？ Reactなどフロンドエンドを中心に人気の言語なので、触ってる人はたくさんいると思います。 奥深くて自分も好きな言語ですが、結構なんとなくで触っていたりしませんか？ 今回は自分が後輩によく聞かれた事や、自分が引っかかった事をたくさん書いていきます。 つまり基本的には初心者向け、よくても中級者向けです。 何か一個でも知らない事があれば御の字のつもりで書いたので、ぜひ気軽に読んでください！ JavaScript編 略称はJS、Javaダメぜったい いなさそうなのに稀にいるという・・ Web開発から入ってプログラムを広く知らない場合に発生しやすい？ Javaは全く別に王者がいるので、万が一使っていたららやめましょう。 略称は JS（じぇーえす） でお願いします。 データ型、Object Objectはキーと値をいくつも持てるJSのデータ型で
Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel
We’re excited to announce Vercel OG Image Generation – a new library for generating dynamic social card images. This approach is 5x faster than existing solutions by using Vercel Edge Functions, WebAssembly, and a brand new core library for converting HTML/CSS into SVGs. Dynamic with limitsThe engagement rate of Tweets that embed a card is 40% higher. While creating and sharing static social image
JavaScriptのデザインパターンについて
どうもoreoです。 今回はモダンなJavaScript開発環境で役立つデザインパターンを紹介します。 この記事は、JavaScript Patterns WorkshopとPatterns.devを参考にしています。 有名な「Java言語で学ぶデザインパターン入門」などでは、古典的な23個のデザインパターンが紹介されていますが、JavaScript Patterns WorkshopではPatterns.devをベースとして、モダンなJavaScriptにおける6つのデザインパターンについて言及されています。この記事ではそれらについてまとめてみたいと思います！ ※本記事中のコードは、JavaScript Patterns WorkshopとPatterns.devから引用させていただいております。 1 Design Patternsとは？ デザインパターンとは、ソフトウェア開発で繰り返し
Optimize long tasks Stay organized with collections Save and categorize content based on your preferences. Commonly available advice for making your JavaScript apps faster often includes "Don't block the main thread" and "Break up your long tasks." This page breaks down what that advice means, and why optimizing tasks in JavaScript is important. What is a task? A task is any discrete piece of work
基盤チームの右京です。 昨今はフロントエンドのアプリケーションもリッチになり、ブラウザ上で実行されるコードが行うことの範囲も増えてきました。一方で多くのことを実装できてしまうのはリスクでもあり、BASE でも問題となることがあります。 その中でも「開発環境の URL」や「デバッグ機能の存在」ような環境毎に異なる情報は、特に意図せずに漏れやすいものだと考えています。これらはコードを記述する際に、実装方法を知識として知っていればその多くが回避可能です。この記事ではその実装例を解説しています。 コードから漏れる情報 例えば、次のようなコードがあるとします。 function debug() { // 開発環境の host であればデバッグ機能を有効にする return location.host === 'dev.example.com'; } なんの変哲もないようなコードに見えますが、ブラウザ
javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
この記事に辿り着いたという事は、プラグインやライブラリに頼らずにスライダーを書きたい、もしくはプラグインを使う事に抵抗はないけれど仕組みを理解しておきたいという方だと想定しています。 大前提 他人の書いたコードはクソ 今からお見せするのは「他人のコード」です。 (他人のコードといっても自分で書いてますが、読者からしたら他人だと思うので) 他人のコードは基本的に不正解だと思ってかかってください。私は正解を発表しているのではなく、アイディアの一つを投げかけているにすぎません。 もしかしたらバグが眠っているかもしれない、もっといい書き方があるかもしれないという視点を常に持ち、そしてにわかコーダー私にJavaScriptをご教示頂けたらと思います。 挙動 実装した機能 スライドの枚数に応じてスライダー内部のスタイル・ドットが自動で調整される(htmlを書き換えるだけでスライドの枚数を変更可能) ド
If you're just getting into compiling your Rust code into WebAssembly and want to load it in a web browser, you might be taken aback by the multitude of ways of doing so. This seems to be due to the differing pace of web browsers implementing web platform features over the years. A lot of entry-level guides to using Rust and WebAssembly make use of a JavaScript bundler for convenience, but this ob
Extending SQLite with Rust to support Excel files as virtual tables
This article explains how SQLite can be extended with Rust. In particular, it will outline SQLite’s mechanism called virtual tables and showcase how we can use it from Rust programming language. In the end, we will have a working extension that can be dynamically loaded and used from SQLite. This article does not claim to be an exhaustive guide about extending SQLite with Rust, but I hope the read
皆さんこんにちは。現在、フロントエンドでは宣言的UIが大流行しており、そのためのライブラリもReactを筆頭に複数存在しています。 ライブラリが複数存在するところには当然のように比較や論争が起こるものですが、UIライブラリの場合はパフォーマンスがよく焦点となります。 筆者はReactの信者ですが、Reactは古株ということもあってか、最近の議論ではReactは他のライブラリと比較されるかませ犬のような役割を担うのがよく見られます。「仮想DOMは必要ない」といった類のものです。 しかし、筆者の考えではReactは今でも、もっとも真剣にパフォーマンスに取り組んでいるUIライブラリです。特に、Reactはパフォーマンスを高いユーザーエクスペリエンスのための手段として捉えており、ドキュメントにもユーザーエクスペリエンスという言葉が多く出てきます。 そこで、今回はReactが最も有利になるようなベン
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript Visualized - Promise Execution
雑にReactアプリを作りたい時に使ってるもの
You Don't Need Next.js | ドクセル
なぜファイルの末尾に改行を入れたほうが良いのか - Qiita
pythonは_(アンダースコア)の使い方を理解するだけでプロフェッショナルになれる - Qiita
Azure OpenAI Serviceの日本語記事まとめ
ChatGPT APIのFunction callingを使って、請求書の構造化データを抽出する | gihyo.jp
OpenAI Function callingで複雑なタスクを簡単に実現 - Qiita
【ChatGPT】新機能「Function calling」が凄すぎた - Qiita
TS のクラスを型とその関数に変換するコンバーターを書いた
【個人開発】世の「家事やれよ論争」を撲滅するスマホアプリをリリースしました - Qiita
ChatGPT APIとStreamlitを使って超簡単にAIアプリを作ってみた - NRIネットコムBlog
divはボタンではない、ボタンの実装について知っておくべきすべてのこと
GoogleスプレッドシートにChatGPTの回答を表示させる関数の作り方 - あなたのスイッチを押すブログ
【君はいくつ知っている？】【知らないと損する】開発の生産性を上げてくれる画期的なWebサービス 18選
JavaScriptをもうちょっと理解する54のトピック - Qiita
Optimize long tasks | Articles | web.dev
フロントエンドのコードからの情報漏洩を防ぐための工夫 - BASEプロダクトチームブログ
ウェブとReact Nativeアプリのコード共通化による同時展開 - Hello Tech
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
プラグインに頼らないスライダーを素のJavaScriptで書いてみた
Rust and WebAssembly without a Bundler | Tung's Word Box
Reactに有利なベンチマークを作ってみた - Qiita
データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ
【脱jQuery】jQuery <=> vanillaJS 書き換え集