Mock Service Worker
import { http, HttpResponse } from 'msw'import { setupWorker } from 'msw/browser' // Describe the network.const handlers = [ http.get('https://acme.com/product/:id', ({ params }) => { return HttpResponse.json({ id: params.id, title: 'Porcelain Mug', price: 9.99, }) }),] // Enable API mocking anywhere.const worker = setupWorker(...handlers)await worker.start() Omit implementation details Intercept
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない（コンポーネントでモジュールをインポートするため）。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
OpenAPI定義をmswに活用してお手軽モック
Leaner 開発チームの黒曜(@kokuyouwind)です。 RubyKaigi Takeout 2021真っ只中ですね。自分も視聴して実況ツイートを垂れ流しています。 でも今回はフロントエンドの話です。 TL;DR OpenAPI 定義を JSON で記述しておくと、 import schema from 'schema.json' で読み込んで Component などの定義を参照できます。 これを使って msw の Handler を定義すると、簡単に API をモックしてテストできるので便利です。 異常系のハンドラーも同じところで定義しておくと、テスト時のレスポンス差し替えもシンプルになって読みやすくなります。 OpenAPI 定義を msw に使いたい 以前書いたとおり、現在自分が担当しているプロダクトでは OpenAPI を使って API スキーマを定義しています。 このス
PostmanのCollectionsで管理されていたドラフトのAPI仕様をOAS形式に変換してみた | DevelopersIO
MADグループ@大阪の岩田です。タイトル通りなのですがPostmanのCollectionsで管理作成されていたAPI仕様をOAS形式に変換してみたので手順やポイントをご紹介します。 環境 今回利用した環境です Postman: 9.30.4 postman-to-openapi: 2.3.0 移行手順 以下の手順でPostmanのCollection形式からOAS形式への変換を行い、API仕様の管理方式を移行していきました。 初期のCollectionsの状態 まず初期段階は以下のような状態でした。PostmanのCollectionsにドラフトのAPI仕様がいくつか作成されており、exampleも作られていました。これらをOAS形式に変換していきます。 Collectionsをエクスポート まずCollectionsに作成されたAPI仕様をエクスポートします。エクスポートしたいColl
まだAPIが出来ていない？私は一向にかまわんッッ
初記事です。 あるフロントエンドの悩み プロジェクトの納期は決まっていて、すぐに着手しないといけない。 だけど、API はまだできていない... 早く着手したい...、ふぬぬ...。 今回はそんなフロントエンドがバックエンドのタスクの待ちにならないように、並行してアジャイルに開発していけるツールとしてmswをご紹介します。 mswとは？ mswとはmock service workerの略で、簡単にモックのAPIを立てることができるライブラリです。 同様のことができるライブラリとしてJSON Serverもありますが、mswには以下の利点があります。 単純にJSONを返すのではなく、ロジックも書くことができる Expressのようにスッキリ書くことができる RESTだけでなく、GraphQLにも対応している 以下のようなケースに向いていると思います。 早く着手しないといけないけど、API
今話題の「ヘッドレスCMS」とは？ Jamstack、マルチデバイスにも対応したCMSの新潮流
はじめに Webサイトはページの構造を表すHTML、スタイルを表すCSS、動きを表現するJavaScriptによって構築されています。現在Webサイトの多くが、PRや顧客獲得などのマーケティング目的で活用されており、状況に応じて内容を更新していきたいというニーズがあります。 内容の更新のたびにエンジニアに頼んでHTMLの編集をしてもらうのはコミュニケーションコストもかかりますし、貴重なエンジニアリソースの浪費とも言えます。 これを解消するのがCMSであり、エンジニアの手を借りずとも管理画面からWebサイトの内容を誰でも書き換えることのできるシステムです。 盛り上がりを見せるヘッドレスCMS 「ヘッドレスCMS」は新しいタイプのCMSです。従来型のCMSはコンテンツの入稿画面・データベースに加えて表示面がセットになっていますが、それに対してヘッドレスCMSはヘッド（表示面）がなく、APIによ
APIキーもログインも不要！完全無料で使える天気予報API「Open-Meteo」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも無料で使える天気予報APIを提供してくれるWebサービスをご紹介します！ 面倒なユーザー登録やAPIキーの設定などが不要で、欲しい天気情報のパラメータを含めたURLを好きなように構成するだけで簡単にJavaScriptから制御できるのが特徴です。 日本はもちろん、世界中の詳細な天気情報を取得できるのでご興味ある方はぜひ参考にしてみてください！ 【 Open-Meteo 】 ■「Open-Meteo」の使い方 それでは、「Open-Meteo」をどのように使えばいいのか詳しく見ていきましょう！ 「Open-Meteo」が提供する天気予報APIを利用するにあたり、何か特別な登録や申請は必要ありません。もっと言えば、ユーザー登録も不要でAPIキーもありません。 非営利プロジェクトであれば誰でも自由に使うことが可能で、以下のエンドポイント
スマートフォンはセンサーの塊！ たった数行のHTML5とJSで扱えるセンサーまとめ(デモ・動画あり) – ICS MEDIA
Figmaでイージングを理解しよう！ プロトタイプの基礎から実装方法の紹介 10月19日公開海老江 優太♥ 17
Google Maps APIをコピペで使い倒せ！Web初心者でもカスタマイズできるgmaps.js | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。エンジニアののびすけです。 最近はひさしぶりに浅草をランニングして健康オタクを気取っています。 さて、ランニングといえば、アプリを使ってタイム測定をしている人も多いのではないでしょうか。大半のアプリには地図が内蔵してあり、特にGoogle Mapsを呼び出しているものが多いですね。 そこで今回は、そのGoogle Mapsをカンタンに導入できるgmaps.jsを使ってみたいと思います。コピペで試せるので、JavaScriptが得意ではないデザイナーやコーダーの方にもおすすめです。 http://hpneo.github.io/gmaps/ gmaps.jsはGoogle Maps APIを使いやすくしてくれるライブラリです。 そのメリットは大きく3つあります。 1. シンプルなコード 記述方法がとてもカンタンで、通常のGoogle Maps APIよりも分かりやすいソースコード
Visual Studio 2012 の「JSON / XML をクラスとして貼り付ける」機能が便利すぎるけど - しばやん雑記
最近 Twitter で酢酸先生とがりっちが同じような内容で悩んでました。 JSON食わせたら自動でクラス作ってくれるプロダクトってないですかね— 酢酸 (山の手線20周) (@ch3cooh) July 5, 2013 DataContractJson(ryは jsonと同じクラス構造をつくらなきゃいけないのでざせつしました — がりっち氏@食用 (@garicchi) July 11, 2013 その度に Visual Studio 2012 で出来るよ！と呟いてるんですが、もしかして出ない環境がある？ 少なくとも、現時点で最新の Visual Studio 2012 Update 3 をインストール済みの環境では使えるようになっているはずです。 すいません、嘘付いてました。Web Essentials 2012 をインストールしておかないとメニューが表示されないようです。詳細は最後に
IP Geolocation and IP Intelligence API どこどこJP
Protect Your Brand & Target Your Key Audience どこどこJPは、IPアドレスと様々な情報を紐づけたIP Geolocation & IP Intelligence データベースを搭載したAPI。IPアドレスからユーザーの地域を認識するエリアターゲティングの技術や、Webアクセス解析、金融や証券分野でのオンライン取引時における不正アクセス対策、デジタル配信される映像や音楽の著作権管理などに役立てられています。犯罪捜査やセキュリティ技術など高い精度が必要とされる場面での活用のために、全世界のIPアドレスデータを搭載しているだけでなく、継続した調査によってデータの品質を向上させる取り組みを日々行っています。 エリアターゲティング エリアターゲティングは、アクセス元の位置情報に応じて最適化した情報をお届けする仕組。ユーザーの興味をとらえ、集客強化とユーザ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ドメインパーキング
TechCrunch | Startup and Technology News
WEBディレクターなら知っておきたいWEBサービス25選｜designaholic -Creative Column-