axiosやfetchに替わるKyのススメ - Qiita
Kyとは Kyは、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。 Kyの利点 軽量で効率的: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。 Promiseベース: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。 シンプルなAPI: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。 再試行機能: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。 JSON処理: Kyは自動
JavaScript の Segments の使い所を考える - Qiita
JavaScript の Segments という機能を知りました。 JavaScript って標準 API でこんなこともできるのかhttps://t.co/ckHTlqcium pic.twitter.com/hrwfgvtF4J — naporitan (@naporin24690) December 25, 2023 これは面白い！ ブラウザの標準機能で自然言語処理ができる時代だ！ とりあえず、お手元で試したい方はこちらをどうぞ。お使いのブラウザの console に貼り付ければ動くはずです。 const segmenter = new Intl.Segmenter("ja", { granularity: "word" }); const string1 = "東京都府中市は「とある科学の超電磁砲」の舞台ではない。京都府中京区も違う。"; const segments = seg
【JavaScript】Promise 〜 初めてのAPI操作 〜 - Qiita
初めまして、現在プログラミングスクールで学習中のやまちゃんと申します。 Reactを勉強してみたいなと思っていましたが、そもそもJavaScriptの基礎を さらっとしか触れていなかったので勉強することにしました。 その中で非同期処理において大事だと言われるPromiseについて少し調べてみました。 今回はcatAPIを用いて猫画像を取得する非常にシンプルなコードで見ていこうと思います。 catAPIについては下記を参照ください！ catAPI ※ この記事は「RUNTEQ Advent Calendar 2023」の21日目を担当した記事です。 そもそも非同期処理とは？ JavaScriptでは基本一つの処理が完了するまで他の作業はできませんが、 非同期処理は一つの作業をしている間に他の作業ができるようにした仕組みの事です。 参考記事 非同期処理とは何か、何が嬉しいの？ Promiseと
【業務効率化】GoogleSheetAPIとJavaScriptで社内検索botを作ってみた - Qiita
こういう人に向けて書いてます 本記事には、 ・面倒くさい事務作業を減らしたい人 ・会社のために、何かを作りたいけど、バックエンドが苦手な人 ・みんなが使えるツールを作りたい人 に向けて書いています。 なぜ社内検索botを作ったのか？ 去年、ジーズアカデミーに入学して、プログラミングを学ぶきっかけの一つっは、どうしても解決したい会社での小さな問題であった。それは、社内でいつも発生する、カスタマー対応の煩雑さ。 流れはこちら： メールが読み→該当するテンプレを探す→お客様の名前を書き換わる→自分のお名前を書き換わる→確認する→送信 （自分の業務じゃないけど、だるい！） ここで考えたのが： １、全社にテンプレ共有 ２、書き換わる部分をわかりやすくする。ミスの少なくする。 目的 ・問い合わせメールをもっと早く返したい ・テンプレを探す手間を省きたい ・担当不在の時でも、情報共有によって、誰でもある
JSONとBigInt
ちょっと前にblueskyで見かけた話題。もとは「GraphQLのスキーマではintが32ビットしかなくて、64ビット整数とかないのがイケてない」といった話だったかなと思う。直感的にはこれは「Javascriptではすべてが倍精度浮動小数点数だから64bit intがないから」ということになるが、よくよく調べてみるといろいろややこしい歴史的事情があるようだ。 たしかにJSにはもともとひとつのNumber型しかなく、いわゆるdouble型(倍精度浮動小数点)だけで数値を表現してきた。IEEE754の倍精度浮動小数点数は仮数部が52ビットあるので、実際には32ビット整数ていどであれば全て誤差なく表現できる。なので32ビット整数または倍精度浮動小数点数がどちらも使えるというふうに理解されてきた。 そうはいっても不便なので、現代のJSにはBigIntがある。ES2020で導入されたらしい。ただし普
Cookie Store API による document.cookie の改善 | blog.jxck.io
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、 I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期
簡単導入! OSS全文検索サーバFess入門(53) OpenAPI対応の検索APIをJavaScriptで利用する
検索APIはFess 14.8から、OpenAPI仕様に準拠して提供されるようになりました。そのため、従来のJSON形式のAPIと比べて、いくつかの変更が加わっています。OpenAPI準拠の新しい検索APIに関する詳細は、検索APIガイドで確認することができます。 OpenAPIに対応することで、検索APIを利用するクライアント用コードを生成することができるため、Fessの検索と連携するシステムを開発しやすくなります。 今回は、検索APIに関するOpenAPIのYAMLファイルを使用して、JavaScriptのクライアント用コードを生成する方法について紹介します。生成されたクライアント用コードを利用して、検索クエリの送信や検索結果の取得方法を説明します。 クライアント用コードの作成 Fessから取得したJSON形式の検索結果をブラウザ上で表示する簡単な例を用いて説明していきます。JavaS
Google Mapよりすごい！と噂の位置情報サービスを使ってみた - Qiita
こんにちは。ミーティングテクノロジーという会社で会議ツールを開発している伊勢川です。 仕事で位置情報サービスを軽く調べる機会があって、せっかくなので調べた内容を記事にしたいと思います。 位置情報（地図）サービスといえば、Google Mapを思い浮かべる人も多いのではないでしょうか。私もGoogle Mapのヘビーユーザー＆ファンで、カーナビの代わりとして使ったり、街で見つけた史跡の写真等を2000件以上投稿したりしています。 B2Cのサービスの中ではGoogle Mapが圧倒的な存在感を放っていますが、B2B向けのサービスとなると様相が異なるようです。今回は、ある調査でB2B向けサービスの中ではGoogle Mapより高い評価がついていた「HERE」というサービスについて書きます。 Google Mapよりすごいと言われる所以はなにか Omdiaのレポートによると、B2B市場の位置情報サ
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
素のJavaScriptだけでアニメーションを実装するWeb Animations API
2022年3月17日 JavaScript Web Animations APIとは、他のライブラリーを使わずにアニメーションを実装できるJavaScriptの仕様です。CSSアニメーションと違い、様々な関数やイベントと組み合わせてより柔軟に、より豊かな表現が可能となります。今回はそんなWeb Animations APIを使ってみましょう！ ↑私が10年以上利用している会計ソフト！ Web Animations APIの基本の書き方 基本的な考え方や構造はCSSアニメーションと同じですが、アニメーションの内容やどう動かすかの指定は、配列やオブジェクトで記述していきます。基本形はこんな感じ： JavaScript 動かす要素.animate(動かす内容, 動きの詳細); 動かす内容（キーフレーム） animate() の第一引数には動かす内容、キーフレームを指定します。CSSと同じ形でプロ
ゼロからはじめるJavaScript(8) ブラウザのFetch APIで天気情報を取得してみよう
2005年に廃れかけていたJavaScriptに輝きを与え、その後のJavaScript興隆のきっかけになったのがAjax(エイジャックス)と呼ばれる技術です。これは、ブラウザから非同期処理を利用して外部データを取得する技術で、今ではいろいろな場面で一般的に利用されている技術です。もともとはXMLHttpRequestというブラウザの機能を使って実装されていましたが、最近では、より手軽に使えるFetch APIが利用されています。本稿では、比較的新しい非同期通信のためのFetch APIを使って、天気情報を取得する方法を紹介します。 Fetch APIとは Fetch APIはブラウザのJavaScriptを利用してネットワーク越しにデータを取得するための新しい機能です。同様の技術には、XMLHttpRequestがありますが、Fetch APIを使う事で、より柔軟で強力な操作が可能になり
Next.js + Vercel + Cloudflare Workers KV + Googleスプレットシートで寄付管理サービスを作った
Next.js + Vercel + Cloudflare Workers KV + Googleスプレットシートで寄付管理サービスを作った philan.netという寄付の予算を決めて寄付した記録をつけるウェブサービスを作ったので、この記事では技術的な部分の解説をします。 philan.net自体については、次の記事で解説しています。 寄付をするために、寄付の予算と寄付の記録をSpreadSheetベースでつける philan.net というサービスを作った | Web Scratch この記事では、Next.js + Vercel + Cloudflare Workers KV + Googleスプレットシートを使って動いているphilan.netについて解説します。 あと検証中にCloudflare Workersを色々いじったのでそれについても書いていきます。 Idea phila
JavaScriptやNoCodeからリンクのプレビュー機能を開発できる「LinkPreview」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、任意のリンクからサムネイル付きのプレビュー表示ができる機能を開発できるWebサービスをご紹介します。 プレビューに必要なデータを手軽に取得できるAPIが提供されており、わずかなJavaScriptコードを書くだけで好きなように自作できるのが特徴です。また、NoCode（ノーコード）でも利用できるため、合わせて使い方を解説していきますので参考にしてみてください！ なお、JavaScriptの基本はpaizaラーニングの「JavaScript入門編」で学ぶことができますので合わせてチェックしてみてください。 【 LinkPreview 】 ■「LinkPreview」の使い方 それでは、まず最初に「LinkPreview」をどのように使えばいいのか詳しく見ていきましょう。 サイトのトップページにある【Sign up】ボタンをクリックしてくだ
JavaScriptでファイル操作！？ File APIを使いこなそう
連載目次 近年のWebアプリケーションでは、画像ファイルやテキスト・ファイル、Officeファイルのアップロードやダウンロードのやり取りが行われることが多くなってきている（例えば、Twitter上での画像ファイル共有やGoogleドキュメントでのOfficeファイルのアップロードなどがそれだ）。 HTML5では、ファイル操作に関するAPIとして「File API」が定義されたことで、ローカルのファイルをブラウザ上で直接、取り扱うことが可能となった。これによって、Webとローカルの違いをアプリケーションで意識しなければならない局面も少なくなる。 現在、File APIは以下の3種類の仕様が策定されている。
JavaScriptからローカルファイルシステムへのアクセスを可能にするFile API、標準化へ一 | スラド IT
JavaScriptからローカルファイルシステムへのアクセスを可能にするFile APIに関する仕様のドラフト文書が、Web標準規格を策定するW3Cに提出されたそうだ（Ars Technicaの記事、ドラフト文書）。 File APIを利用することで、たとえばローカルのテキストファイルを読み込んでテキストエリアにその内容を入力する、といった処理がクライアントサイドだけで実装できるようになる。また、セキュリティ的な問題を発生させないよう、フォームの<input type="file">要素でユーザーが指定したファイルのみにアクセスできるような制限が課せられているとのこと。 JavaScriptの可能性が大きく広がるのは歓迎できるが、セキュリティ面が考慮されているといってもちょっと怖い面があるのも否めない。あとはIEの対応ですかね……。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【JavaScript】Mutation ObserverでDOMを監視する - Qiita
hinata.in