翻訳: WebAPI 設計のベストプラクティス - Qiita
これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さんなりの答えを提示し、簡潔かつ明快に解説してくれています。 今後 WebAPI を設計される方は、是非参考にしてみてください。 なお、誤訳がありましたら編集リクエストを頂けると幸いです。 まえがき アプリケーションの開発が進むにつれて、その WebAPI を公
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！ という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背
SPAのページをGAで計測？従来のWEBと同じで余裕でしょ！と思い込んでた話 - Qiita
SPAをGA4、UAの両方で計測できるようにしたい！ WEB計測で利用されている超有名なツールといえば「Google Analytics」。（以下、GA） 計測タグを読み込ませるだけで、PV数やユーザー数、セッションなど多くの指標を計測できるこの便利なツールをGoogleは無料で提供しています。Googleさん、太っ腹！ 普段、私が数値集計に使っているGAはUniversal Analytics（以下、UA）形式ですが、Google公式から「2023年7月からGA4に完全移行するよ。今後、UAは使えなくなるよ」と告知されたので、GA4とUAの画面を見比べたりUAで計測できている数値をGA4で確認する方法を探したりと、手探りで移行準備を進めています。 GA4に早く慣れないとなぁと考えながら普段の業務をこなしているところに、Nuxt.js、Node.jsを使ったSPA（シングルページアプリケー
ChatGPTによるプロンプトの生成｜NyaFu
えーっと、note初記事です。つたない内容でしかもメッチャ長文ですがお付き合いください。 今回はタイトルにあるように、Stable DiffusionのプロンプトをChatGPTで生成する、今までとはちょっと違うやり方をご紹介します。 簡単なレクチャーも含むのでかなりのテキスト量ですが、最後まで目を通していただければ良いことがきっとあります。 はじめにまずこれからお伝えする技法は現時点でGPT4の使用が前提となっています。（追記：Bingでも可能になりました） 3.5では、私の技量が至らず安定した結果が得られていません。 しかしながら、先だってこの手法をお伝えした有志の方々が3.5及びBingでの実現を模索されていることを予めお伝えしておきます。 今回の手法を発見した経緯とネタバレことの発端は遡ること１か月前、プロンプトを自動でジャンル分けしてデータベースに流し込み、逆にそこからプロンプト
フロントエンドの Monorepo をやめてリポジトリ分割したワケ - カミナシ エンジニアブログ
こんにちは。ソフトウェアエンジニアの坂井 (@manabusakai) です。 カミナシのプロダクトは、管理者の方が使う Web アプリに React、現場の方が使う iPad / iPhone アプリに React Native を採用しています。 どちらもフロントエンドの技術スタックを採用していることもあり、先日までは Monorepo と Yarn Workspaces の構成で運用されていました。 最近では Monorepo 化を進めている事例もよく見かけるようになってきました。 engineering.mercari.com devblog.thebase.in ですが、カミナシでは Monorepo をやめてリポジトリ分割をする意思決定を行いました。 具体的には、harami_client という Monorepo を harami_web と harami_mobile とい
Nuxt.jsのAuth認証の設定(バックエンド設定含む) | アールエフェクト
本文書ではNuxt.jsのモジュールnuxtjs/authを使い、Tokenを利用したJWT(JSON WEB TOKEN)のAuth(認証)の設定を行っています。Nuxt.jsでJWTの認証を行うためにはバックエンドが必要になります。バックエンドにはNodeのExpress.jsを使って構築します。本文書を読むことでNuxt.js環境下でTokenを利用したユーザ認証の設定手順の流れを理解することができます。 Tokenを使った認証の設定が行えることを本書の目的としているため入力フォームのデザイン、バリデーションやセキュリティについての説明は行っていません。特にセキュリティについてはJWTの設定方法がわかった後にしっかりと勉強してください。 Express.jsを使ったバックエンドの設定については一緒に記述すると文書が長くなるためまたフロントエンドにNuxt.jsを利用した場合のみ利用で
【フロントエンド】プロジェクト初期に手を抜かないで - Qiita
はじめに みなさんは新規サービスを立ち上げたことがありますか？ 技術選定から環境構築、諸々の初期設定。大変なことが多いですよね。 僕はこの4年で、新規サービスを3つ、新規の管理画面系を1つ立ち上げたのですが、このプロジェクトの初動で毎回のように後悔をしてます。 特に、フロントエンド領域というのはJavaScriptという自由な言語の特色を色濃く反映しているのか、非常に自由度が高く、どのようにも書けてしまいます。 そんな僕からのアドバイス。 プロジェクトの初期は最大限頑張ること。 最低限ではなく、最大限を心がけるといいと思います。 今回は、理由とともにどんなことを気をつければいいのかという話ができればと思います。 新規サービスの環境構築は最大限頑張った方がいい理由 1. 人は増える。あなたと他の人を一緒にしてはいけない。 環境構築をするのは1人でも必ずあなたではない誰かがプロジェクトにアサイ
[Electron] 設定情報をローカルファイルに簡単保存 - electron-store - ねこの足跡R
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。 今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。 ソースコード 準備 基本的な原理 利用方法 どこに記録されるの？ サンプル デモ メインプロセス レンダラープロセス おまけ 保存先やファイル名を変更する データファイルを暗号化する Validationを行う 参考ページ ソースコード 実際に稼働するソースはGitHubからも確認できます。 github.com 準備 npmで一発で入ります。 $ npm install electron-s
![[Electron] 設定情報をローカルファイルに簡単保存 - electron-store - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/5e9be8aef0118268156082aa635bee6a59c75d5f/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125062853.png)
APIシナリオテストの新ツールrunn
runn is 何？ ３行まとめ 今回はAPIシナリオテストツールのrunnをプロジェクトに導入し、一部機能のコントリビュートしながら3ヶ月間触ってみておすすめだと感じたことを記事にまとめたいと思います。 runnとの出会い 4ヶ月ほど前にスキーマ駆動開発を行っているプロジェクトでいい感じのAPIのテストをしようと色々 調査 をしていました。 その当時はOpenAPIでスキーマ定義してswagger-uiからポチポチ手動テストをしていましたが、APIの数も増えるし同じAPIでもパターンが結構あり、流石に手動でのテストでは限界があるなーと考えていました。 パラメータ数も多いのでControllerテストで書くにしてもコード量が多く、レビューが辛いと感じていました。 APIをE2Eでテストしたい、最終的にはCIで自動テストまでもっていきたいと思いました。 しかし、いざ調べてみると案外ニーズにマ
tsconfig.jsonの主要オプションを理解する - Qiita
概要 社内勉強会の資料。 TypeScriptのtsconfig.jsonにはオプションが色々とあるので、それらの意味や用途を理解する目的です。 tscのバージョンは3.7.2を使用します。 VSCodeのバージョンは1.40.1を使用します。 公式のドキュメント：https://www.typescriptlang.org/docs/handbook/tsconfig-json.html 公式ドキュメントの和訳：http://js.studio-kingdom.com/typescript/project_configuration/tsconfig_json また、各項目の詳しい説明はdetailsタグを使ってデフォルトで非表示にしています（全部デフォルトで表示するとめっちゃ長いので）。「詳しく」の部分をクリックすると展開されます。 2020年5月24日追記 公式のtsconfig.j
PlantUML で JSON データを簡単視覚化
最近，仕事で使うことがあってたまたま気がついたのだが， PlantUML って JSON や YAML のデータを視覚化できるんだね。 やり方は簡単。たとえば { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spous
[pdf] JWT ハンドブック Sebastián E. Peyrott、Auth0 Inc.
JWT ハンドブック 著者: Sebastian Peyrott JWT ハンドブック Sebastián E. Peyrott、Auth0 Inc. バージョン 0.14.1、2016〜2018 1 ⽬次 ⽬次........................................................................................................................................................................................ 1 謝辞.........................................................................................................
JWT.IO
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. JWT.IO allows you to decode, verify and generate JWT. Learn more about jwtSee jwt libraries Warning: JWTs are credentials, which can grant access to resources. Be careful where you paste them! We do not record tokens, all validation and debugging is done on the client side.
PENGUINITIS - AWS Lambda の終了パターン
return Lambda は何を返してもよい。 exports.handler = async (event) => { return "Hello!"; } それっぽく次のように返してもよい。 exports.handler = async (event) => { const response = { statusCode: 200, body: JSON.stringify("Hello!"), }; return response; }; context context を使う方法もある。 exports.handler = async (event, context) => { context.succeed("Hello!"); }; これは呼び出された時点で突然終わる。 エラーの場合は代わりに context.fail() を使う。 context.fail(new Err
AWS LambdaでGoogleドライブとスプレッドシートの操作を自動化をしてみた | SONICMOOV LAB
フロントエンドエンジニアのまめ太です。 僕の自作デスクトップアプリの一つに、起動履歴をGoogleスプレッドシートに送信し、記録しているアプリがあります。このシートでは、毎月1日に、いつの記録かをファイル名に含めてシートを別名保存したのち、コピー元のシートをクリアして新たにデータを記録できるようにしています。 この作業は、GoogleスプレッドシートとGoogleドライブ上で手動で行っているので、やっぱり面倒です。 というわけで、「一定期間おきに特定のスプレッドシートのコピーを取ってGoogle Drive上のフォルダに別名保存し、コピー元のスプレッドシートの内容をクリアする」という作業を自動化してみました。 利用した技術と構成 今回は、AWSのLambda関数として用意したNode.jsのスクリプトをCloudWatchのスケジュールトリガーで定期実行する形で自動化を行いました。 Lam
Lambda(Python)でGoogle Driveへファイルアップロード - Qiita
この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。 以下を見てからこの記事をみるといい感じです。 * Lambda(Python) + Rekognition で顔検出 イントロダクション S3ってファイルを保存するだけならいいのですが、そのファイルを人が参照するのには向いてないですよね。画像にしてもWebブラウザ上でそのまま見ることができず、一度ダウンロードしてから見る必要がある。ちょっと手間なんですよね。 その点、Google DriveはPCにしろスマホにしろ、ブラウザやアプリでいい感じに画像を参照することができますのでいい感じです。 コンテンツ Google Developers Console プロジェクトの作成 GoogleのDevelopers Consoleのにアクセスします。 https://consol
AWS Lambda からサービスアカウントで Google APIs を叩くまでにやったこと | DevelopersIO
コンサルティング部の西野です。 AWS Lambda からサービスアカウントを使用して Google APIs を叩く機会がありましたので、その手順を紹介します。 やりたいこと G Suite ドメイン内のユーザーによって Google Drive 上に保存されたファイルの名称を AWS Lambda 経由で取得することをゴールとします。 構成図 server-to-server (Lambda to Google API) で API をコールするためサービスアカウントを用いる Using OAuth 2.0 for Server to Server Applications AWS リージョンはアジアパシフィック（東京）/ ap-northeast-1 を使用 API コール用のサービスアカウントキーを SSM Parameter Store に SecureString として保存す
OpenAPI Generator と TypeScript で型安全にフロントエンド開発をしている話 - SmartHR Tech Blog
こんにちは、SmartHR でフロントエンド開発を担当している @Tokky0425 です。 この記事では、私のプロダクトでの OpenAPI Generator を使ったフロントエンド開発の取り組みを紹介していきます。 目次 OpenAPI とは 「ラクラク分析レポート」の DX 上の課題 OpenAPI Generator とは 実際に generate してみる 生成ファイルを使ってみる 型情報を出力してみる 組み込み・運用の工夫 chokidar で監視する lint-staged に組み込む メリット・デメリット メリット デメリット まとめ OpenAPI とは OpenAPI とは、「REST API のドキュメントの記述形式を定めた仕様」のことを指しています。 簡単な例ですが、下記のような YAML ファイルがあるとします。 schema.yml paths: "/some
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSON Hero - A beautiful JSON viewer
NestJSで簡単なtudoリストを実装するチュートリアル