React Query を使っていて気になった SWR とのいくつかの違い | DevelopersIO
MAD 事業部の高橋ゆうきです。 REST API である場合、プライベートでは SWR を使うことが多いのですが、昨年から案件では React Query を使っているのでいくつかの違いを感じることがありました。ここでは React Query のドキュメントにある表 から気になった違いをいくつかピックアップしてみます。 比較 Query Key Change Detection React Query - Deep Compare (Stable Serialization) SWR - Shallow Compare Deep Compare (Stable Serialization) 2021 年 2 月 20 日現在上記のように記載されていますが、SWR も 1.1.0 以降は ドキュメントにも記載されているように、stable serialization となっています。 Q
ProtobufでREST APIを快適に開発する方法のご紹介 - TIER IV Tech Blog
こんにちは、ティアフォーで認証認可基盤を開発している澤田です。 最近取り入れたProtobufで、素晴らしいREST APIの開発体験をしたのでご紹介します。 なお、ティアフォーではマイクロサービスを支える認証認可基盤を一緒に開発いただけるメンバーを募集しています。ご興味のある方は下記ページからご応募ください。 herp.careers 実現したかったこと マイクロサービス間連携のAPI開発において、以下の条件を満たすやり方を探していました。 スキーマを最初に定義してリクエストとレスポンスの型が自動で生成される ドキュメント（openapi.yaml）が生成される バリデーションが定義できて、その実装が自動で生成される 実現方法 Go言語で開発する場合はgo-swaggerでも実現できますが、本記事では、Protobufで実現できるgRPC Gatewayとprotoc-gen-valid
React 初心者が Material-UI で今どきの Web フォームを作ってみた（yup編） | DevelopersIO
React 初心者が、Material-UI と React Hook Form v7 を活用して今どきの Web フォーム開発に挑んでみました！ つい先月、React（+ React Hook Form）と Material-UI を組み合わせた Web アプリ開発を始めました。アプリ開発初心者でも簡単に、かつ今っぽい Web フォームを開発することができたので、少しコードを交えてご紹介してみたいと思います。 なお本記事は、前の記事（react-hook-form編）に続く形式となりますので、お時間あれば下記の記事も合わせてご参照いただけますと幸いです。 作ってみた 前回の記事で作成した Web フォームの基本項目（Basic.js）というフォームに下記の yup という JavaScript schema builder を利用してバリデーションの機能を追加していきたいと思います。 バ
Checklist - Rust API Guidelines
Rust API Guidelines Checklist Naming (crate aligns with Rust naming conventions) Casing conforms to RFC 430 (C-CASE) Ad-hoc conversions follow as_, to_, into_ conventions (C-CONV) Getter names follow Rust convention (C-GETTER) Methods on collections that produce iterators follow iter, iter_mut, into_iter (C-ITER) Iterator type names match the methods that produce them (C-ITER-TY) Feature names are
MongoDB 5.0が登場。時系列データ対応、実行中のシャーディング変更に対応など
MongoDB社は、同名のNoSQLデータベースの最新版となる「MongoDB 5.0」のリリースを発表しました。MongoDB 5.0はオンプレミス用と、クラウドサービス「MongoDB Atlas」の両方で提供されます。 Breaking News - CTO @MarkLovesTech announces the release of MongoDB 5.0! Introducing new workloads Future proof apps Next-gen privacy pic.twitter.com/bZhv7vw8kt — MongoDB (@MongoDB) July 13, 2021 MongoDBは、さまざまな種類が存在するNoSQLデータベースの中でも、ドキュメント指向データベースとしてJSON形式のデータ格納を中心としたデータベースです。JSONを用いること
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント | ログミーBusiness
JavaScriptからTypeScriptへの移行プロジェクトが始動東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベントカレンダーを書いています。 今日お話しする概要ですが、マイクロサービスの1つをJavaScriptからTypeScriptに移行した内容をお話しします。状況ですが、新規の旅行アプリの開発が走っていて、マイクロサービス化された1つを除いて、画面やフロントサーバーのアプリケーションなどはTypeScriptで開発されていたんですが、一番大きなサービスがJav
私が React を好きな理由
何かを好きになるのに、理由なんているかい？ ~セ・ヤ (B.C.2525)~ 出会い あれはおよそ4年前のことでした。 2016年の冬、寒さに震えていた私はフロント未経験の身でありながらフロントの技術選定をしなければならなかったのです。 その頃のフロント界は混迷を極め、 React もまだ枯れておらず、Angular は2系が1系と大きく違うことから叩かれ、Vue が名乗りを上げようとしていました。「フロント界隈は動きが速い」というフレーズも流行語大賞になりそうな勢いでした。 そんな中選択肢・考えることの多さに絶望していた私は React を試しに触ってみました。 そして「思ったより覚えることないし、独自文法とかも少ないからミスってもリカバリー効きそうだな」と直感的に思いました。 はっきり言ってしまえば雰囲気で選んだのですが、今ならこの時の直感は間違っていなかったと自信を持って言えます。
microCMS SDK + Next.jsを用いた開発手順
こんにちはhiro08です。 現在フロントエンドエンジニアとしてmicroCMS本体の開発に携わっていて、日々サービスの新機能開発や改善を行っています。 そして、先日リリースされたmicroCMSのJavaScript、iOS、Android SDKの3つのうち、JavaScript SDKの開発を担当させて頂きました。リリース時のブログはこちらです。 microcms-js-sdkはnpmで配布されていて、GitHubにオープンソースとして公開されています。 ※現在はGetリクエストのみに対応しています。今後、機能追加や改善していく予定です。 SDKを用いて開発するメリットとしては、Fetch APIやXMLHttpRequest等のネットワーク通信に関する処理を隠蔽できることにあります。冗長的になりがちなリクエスト処理を、メソッド化することによって一貫性があり、クリーンなコードを書くこ
TypeScriptとOpenAPIスキーマで型安全に READYFORが語る“スキーマファースト”で効率的な開発方法 | ログミーBusiness
「実践！フロントエンド分離戦略」はREADYFOR 株式会社主催のエンジニア向けLT勉強会です。ここで、菅原氏が「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」のタイトルで登壇。スキーマ駆動開発とそのメリット、活用しているツールについて話します。 READYFORのフロントエンジニア菅原弘太郎氏（以下、菅原）：それでは「OpenAPI GeneratorとTypeScriptによる型安全なスキーマ駆動開発」と題して、発表します。自己紹介します。2020年11月に、フロントエンドエンジニアとしてREADYFORに入社しました。岩手県在住で、フルリモートで勤務しています。ReactとTypeScriptが好きで、React Hook Formのメンバーなので、もしフォローしてくれる方がいれば、フォローしてください。 フロントエンドとバックエンドの分離ま
[ポエム]VueとReactとCSSについて思うこと2021/1月版
技術について思っている印象とかを、定期的にまとめておくとあとで見直したときに良い振り返りになるかもしれないなと思ったのでまとめておく。 上記の目的でやるので思い切り主観で書く。 Vue について思うこと composition-api がとてもいい。 composition-api で頑張るなら React 使えよみたいな意見を耳にしたことがあるが、Vue の良いところは、template と style が JS と別個で動くというところだと思っているので、composition-api の前身である Option API が改善したところで、React と比較してどうこうみたいな見解の変化はない。 Vue を使っている限りは、基本的には CSS in JS 戦争に巻き込まれないので平和。 Vue3 をまださほどキャッチアップしていないので適当な意見になるが、SFC の書き方自体が結構変
![[ポエム]VueとReactとCSSについて思うこと2021/1月版](https://cdn-ak-scissors.b.st-hatena.com/image/square/650aeacc1de481e36a105db41f5b0308d2d0a211/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14GjOZkrZMgKwcEyykl5_iULVEVkUUJd793r9_z8DF4s%3Ds250-c)
Async Clipboard APIでJavaScriptからクリップボードを操作する
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいドキュメントに書かれていないComposition APIのコードの書き方とVuex vs provide/inject - Qiita
まえがき 最近iCAREさんの所で Vue.js を一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回の記事の内容はiCareさんのDev Meetupで話した内容になります. 最近公式のソースを追った所、 Composition API はapiの紹介はあれども、コードの書き方やその背景、Tips等は全然見当たりませんでした. また、すごく強力なapiである provide/inject の紹介も全然見当たりません. 今回はiCAREさんの所で Vue.js を書く際に皆で意識している Composition API と活用している provide/inject のノウハウとその詳細な理由を共有します. ※ 直接編集リクエストをくれていつもありがとう
時系列モデル(ARIMA/Prophet/NNなど)を統一的なAPIで扱えるPythonライブラリ「Darts」がかなり便利 - フリーランチ食べたい
時系列モデルを扱う上でデファクトスタンダードになりそうなPythonライブラリが出てきました。 時系列モデルを扱うPythonライブラリは、 scikit-learn のようなデファクトスタンダードなものがありません。そのため時系列モデルを用いて実装を行うためには、様々なライブラリのAPIなどの仕様を理解しつつ、それに合わせてデータ整形を行い、評価する必要があり、これはなかなか辛い作業でした。 スイスの企業 Unit8 が今年(2020年)6月末に公開した Darts はまさにこういった課題を解決するライブラリです。時系列に関する様々なモデルを scikit-learn ベースのAPIで統一的に扱うことができます。 github.com Darts は現在、下記のモデルに対応しています。内側では statsmodels 、 Prophet(stan) 、 Pytorch などを使っていて、
BRAVIAのREST APIを使ってテレビを操作してみた | DevelopersIO
はい、どーも！CX事業本部の吉田です。 今日 Twitterをいつものように見てたところ、以下のようなツイートが流れてきました。 BRAVIAはガッツリAPIあるな。いいこと聞いた。 "はじめに | BRAVIA Professional Display Knowledge Center" https://t.co/0ngvvFMIrM — moyashi (@hitoriblog) August 21, 2020 ちょっと見た感じ、法人向け製品のみに実装されてるのかな？と・・・ ちょうど我が家のテレビもBRAVIA(KJ-55X8550G)だったので、試しにそのIPを叩いてみると、nginxのレスポンスが返ってくるではありませんか。 多分REST APIで叩けそうだぞ！ということで試してみました。 前準備 まずはテレビ側を準備します。 テレビのホーム画面から設定に入ります。機種によってこ
頑張らない勤怠管理〜ラズパイとfreeeでWi-Fi打刻〜 - Qiita
皆さん勤怠管理してますか？ 今回は人事労務freeeさんのAPIと連携して、Wi-Fiに接続したら出勤、Wi-Fiの接続が切れたら退勤というものを作ってみました！ 用意するもの freeeの開発用アカウント Raspberry Pi（社内サーバがあればそれで良いです） Firebaseアカウント システム構成図 Wi-Fiが繋がったデバイスをラズパイでarpで取得 MacアドレスをFirebaseに送信 Firebaseから人事労務freeeのAPIを呼ぶ freeeのセットアップ APIを叩くにはclient_id, client_secret,code, access token, refresh token がそれぞれ必要になるのですが、下記の公式チュートリアル記事が大変参考になりました。 OAuthを私が雰囲気でしか理解していないためか、認可コード(code)、refresh to
「Bootstrap 5」のアルファ版がリリース、脱jQueryやCSSカスタムプロパティの強化など
CSSフレームワーク「Bootstrap」の最新バージョンである「Bootstrap 5」がアルファ版としてリリースされました。バージョン5ではjQuery依存からの脱却や、Internet Explorerのサポート終了によるCSSカスタムプロパティの強化など、数多くの新機能が追加されています。 Bootstrap 5 alpha! | Bootstrap Blog https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/ 目次 ◆ドキュメントページやロゴのデザイン変更 ◆jQueryとJavaScript ◆CSSカスタムプロパティ ◆ドキュメントの改善 ◆フォームの改善 ◆ユーティリティAPI ◆グリッドシステムの強化 ◆ドキュメントの生成方法変更 ◆ドキュメントページやロゴのデザイン変更 バージョン5では、ドキュメントペ
JavaScriptコードの静的解析ツール「ESLint v7.0」リリース | OSDN Magazine
JavaScriptの静的コード解析ツール「ESLint」開発チームは5月8日、最新のメジャーリリース版となる「ESLint v7.0.0」を公開した。 ESLintはJavaScriptコードの問題を検出できる静的なコード解析ツールで、さまざまなテキストエディタに組み込まれている。ほとんどの問題に対して自動的なコード修正が可能で、また構文解析を行っているため、検索・置換型で発生するような誤認識などのエラーが起きないという。 ESLint v7.0は2019年6月に公開されたESLint v6.0に続くメジャーリリース。Node.jsのバージョン8系が2019年12月にサポート終了を迎えたことを受け、最新版ではそのサポートが削除された。 コードルールでは、複数のルールでbigintを認識するようにアップデートした。また、Node.js/CommonJSルール10件が非推奨となった。esli
Web技術/Ionic Frameworkでつくったモバイルアプリにできないたったひとつのこと。｜榊原昌彦
ときどき「Ionicでつくったモバイルアプリ（Web技術/HTML5でつくったiOS・Androidアプリ）で出来ないことって何ですか？」と質問を受けるので簡単にまとめようと思います。 （カバー画像に意味はないです。何使おうかと思って探したところめちゃくちゃ可愛かったからこれにしました） パフォーマンスが低いという誤解とりあえず、「Web技術でアプリつくるとパフォーマンス低くて使い物にならないって聞くんだけど」というのはもうとっくに通り過ぎた昔の話です。以下の2つのレンダリングを比較してみてください。 圧倒的に後者のほうがなめらかでスムーズですよね。これはReactの過去の実装（Stack）と、4年前に刷新された「Fiberアーキテクチャ」との比較なのですが、JavaScriptのレンダリングの実装はここまで進化しています。 こちらはつい最近実装されたIonicでユーザがアニメーションを実
様々なクラウドにアクセスするPythonライブラリ「Apache Libcloud 3.0」公開 | OSDN Magazine
さまざまなクラウドサービスに対応するPython向けのクラウド操作ライブラリ「Apache Libcloud」開発チームは4月15日、最新のメジャーリリースとなる「Apache Libcloud 3.0.0」のリリースを発表した。本リリースではPython 2.7および3〜3.5のサポートが廃止されている。 Apache Libcloudは、統一されたAPIでさまざまなクラウド事業者のクラウドサービスを操作できるPythonライブラリ。提供されるAPIは大きく分けて「Compute」や「Storage」、「Load Balancers」、「DNS」、「Container」、「Backup」の6種類で、対応するクラウドサービスはAmazon Web Services（AWS）、OpenStack、Microsoft Azure、Google Cloud Platformなど50以上。Pyth
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js 10のnext/imageによる画像最適化を試してみた
