王道か邪道か？ タイムスタンプによるステート管理
Reactによるステート管理では、ある状態が変化したら付随して他の状態も変化してほしい場合があります。例えば、次のような場合を考えます。 チェックボックスが1つある。 チェックボックスの初期状態は、HTTP APIから取得したデータによって決まる。 ユーザーはチェックボックスを操作できる。 APIからデータを再取得する場合があり、その場合はチェックボックスの状態が再取得されたデータに従ってリセットされる。 皆さんは、このような要件をどのように実装するでしょうか。 やりがちな実装 まず、やりがちな実装を見てみましょう。 const apiData = useApiData(); const [isChecked, setIsChecked] = useState(false); useEffect(() => { setIsChecked(apiData.isChecked); }, [ap
You Don't Need Next.js | ドクセル
[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 ( <
無限スクロールは考慮することが多い
毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ
Next.js の API Routes から SWR の型推論を導く
ファイルシステム API Routes の課題 Next.js のファイルシステムを利用した routing は、直感的に定義を追加することができます。一方、モジュールシステム観点からは透過的参照がないため、TypeScript の型推論と相性が悪いです。Next.js における型安全な routing ソリューションとして pathpida がありますが、API Routes には対応していません。 useSWR から API Routes の API を呼ぶシーンで期待に沿うものが見当たらなかったので、今回自作してみました（リポジトリはこちら）本サンプルでは、npm script のpostinstallを hook に、src/types/pages/apiに生成ファイルが出力されるので、あらかじめnpm installを実行してお試しください。 サンプルで実現している型推論概要 は
High performance storage for your app: the Storage Foundation API | Web Platform | Chrome for Developers
The web platform increasingly offers developers the tools they need to build fined-tuned high-performance applications for the web. Most notably, WebAssembly (Wasm) has opened the door to fast and powerful web applications, while technologies like Emscripten now allow developers to reuse tried and tested code on the web. To truly leverage this potential, developers must have the same power and fle
Google Data Studioのスクリーンショットを定期的にSlackに投稿するツールを作った - 日直地獄
サービスを運用していく上でメンバーに数字感を身に付けてもらったり、リリースした機能の利用状況、狙い通り正常に動作しているかを把握してもらったりすることはとても大事です。 同じオフィスにいる場合には、常時モニタに表示するなど工夫が可能ですが、リモートワーク下においてはそれも困難になりました*1。 これにまつわる、いくつかの課題を解決するためにGoogle Data Studio *2の任意のページのスクリーンショットを定期的にSlackに投稿するGoogle Apps Scriptを書きました。 利用開始する前にはSlack側でAppを作成したりそれなりに準備が必要なのですが、一度設定したら、あとは手がかからなくなるので、費用対効果はいいと思います。 詳しい導入方法などは下記を参照してください。 https://github.com/airreader/datastudio-2-slack
ケンオール 📮 郵便番号住所検索・住所逆引き・法人情報API
ソフトウェアを常に最新に私たちはソフトウェアを最新に保つことがいかに難しいかを知っています。 ケンオールはデータを最新に保ち整理するプロセスを自動化し、変更を自動的に取り込むことができます。 さまざまなデータに対するAPIを使用して、既存のシステムを当社のシステムにリンクします。
SWRとReact Queryどっち使おうか検討したメモ
const { isLoading, error, data } = useQuery('repoData', () => fetch('https://api.github.com/repos/tannerlinsley/react-query').then(res => res.json() ) ) 一見、ほとんど一緒じゃん、となるが、SWRは「キーをfetcheの実行するためのパラメータ」になっている。 一方、react-queryは「キーと実行APIは独立している」。これはイメージとしてReduxのActionなどのconstantのような印象を受ける APIの違い Core API RQ : https://react-query.tanstack.com/docs/api SWR https://swr.vercel.app/docs/options#parameters これ
Vue に stale-while-revalidate がやってくる - STORES Product Blog
STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate
PythonでTinder APIを使ってネトストとサイバーナンパ師やってみた
こんにちは。突然ですが、ナンパしたい。僕は陰キャラなので、歌舞伎町でナンパに繰り出すことなんてできない。 そういえば前回、PythonでTinderのAPIをいじるで書いた通り、PythonでTinderのAPIをいじれた。原理的には自分のアカウントのFacebook access tokenを取得して、Python上でTinderを動かす。 前までは導入編だったので、今回は応用編。APIを使わないとできないことを試してみよう。最終目標は地理情報を取得して、その場所に行かなくてもある場所の半径5km以内でナンパすることだ 手始めに、APIの練習。友達の彼女持ちでTinderを最近利用したユーザーを探してみる TinderはFacebook上の友達しか表示されない点で人気のサービスだが、実はFacebook上の友達でTinderを利用している友人を取得できるらしい。 さらに、Tinderを利
Universal Data Fetch ライブラリ、 Specter の紹介 - from scratch
この記事は Recruit Engineers Advent Calendar 2019 の 16日目の記事です。 adventar.org 最近僕が作っている OSS である Specter の話をします。 github.com Specter とは Client から Backend と BFF から Backend への Universal なデータフェッチを提供してくれるためのツールです。以下の特徴を持ちます。 軽量 TypeScript Freindly な型付け機能 投機的先読み 2年ほど前に報告されたCPUの投機的実行に基づく脆弱性である、 Spectre から来ています。と言っても、脆弱性の名前ではありません。投機的先読みを機能として持っているため、この名前をつけています（不吉な名前ではありますが・・・）。 まずは、 GraphQL でも grpc-web でもなく、なぜこ
NodeJSのIntlサポートを調べた - Islands in the byte stream
IntlというのはECMAScript Internationalization APIのこと ECMA-402 として標準化 Intl - JavaScript | MDN NodeJSでも利用可能だが、ビルドオプションによって様子が変わる NodeJSのICUサポートは none, system-icu, small-icu, full-icu というオプションが用意されている https://nodejs.org/api/intl.html 公式バイナリのオプションは small-icu で、これは英語だけをサポートしている 起動時にICU dataを与える事も可能 この情報は node -e 'console.log(process.config.variables)' で調べられる Intl によってI18N処理をするときに日本語サポートをしたい場合、3つの選択肢がある full
React におけるローディングの状態管理について - freee Developers Blog
エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、スピナーの表示などが挙げられます。各種ドキュメントや Issue, Example を見ても様々な流派があり、結局のところ Redux の FAQ にもあるようにこれが正解といったものはなくモデリングや要件に応じて適宜判断すべき話ではあるのですが、チーム開発においてはある程度方針を統一しておく必要があるでしょう。 本記事ではそうしたコンポーネントの状態管理のうち、特に非同期処理が絡んできて複雑になりがちなローディングについて自分の経験をもとに実
Async Clipboard APIでJavaScriptからクリップボードを操作する
JavaScriptからのクリップボードの操作は、長いあいだ開発者たちに切望されていました。かつてはFlashを使って実現するハックなどがありましたが、各ブラウザがexecCommandによるクリップボード操作を実装したことで、現在は落ち着きつつあります。 ただ、APIが綺麗に整備されているとは言いにくく、あまり現代的ではありません。そこで、スマートかつ現代的にクリップボードを扱うことができる、Async Clipboard APIの実装が進みつつあります。 Async Clipboard APIはその名の通り非同期でクリップボードを扱うAPIです。Async Clipboard APIはPromiseを返すので、直感的に扱えるようになっています。 従来のAPIでも、execCommandを用いることによってクリップボードを操作することができました。しかし、バグが多くブラウザ間の整合性が取
EU一般データ保護規則(GDPR)への対応に向けたやるべき事まとめ – 週休７日で働きたい
EUの個人情報保護に関する新しい法律(General Data Protection Regulation)が2018年5月25日から施行される。EUの居住者に対してサービスを提供していて個人情報を取り扱っている業者は、たとえ個人であろうとも遵守義務が課せられる。 最近多くのサービスがプライバシーポリシーの改定を行っているのはそのためである。個人で作っている自分のサービスにもEUのユーザが沢山いるので、そろそろ対応しなければならない(遅い)。 今回はEUの法律によるものだが、内容は至極真っ当な、客観的に見れば当たり前のルールだ。将来的には事実上のデファクトとなり、アメリカや日本もこの法律に倣うのは時間の問題だろう。だから「日本人向けのサービスだから大丈夫」とほったらかしにしている業者は後々痛い目に遭うだろう。 Twitter社がパスワードをログに記録していた件は記憶に新しいが、今これが公に
Painting with Code
Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. If you’re a designer or an engineer familiar with React, you should feel right at home with the new library, and you can play with it right now. H
日本の行政機関等が公開しているAPIについてのまとめ（2016年8月17日暫定版。随時更新） - Qiita
この記事は下記のURLにあるコミックマーケット90で頒布した同人誌と自分が管理するブログの記事を微修正し、転載したものです。 南関東開発機構 : 同人誌「日本の行政機関が公開中のAPIについて調べてみた本」を公開しました http://blog.livedoor.jp/south_kanto_dm/archives/52143201.html 南関東開発機構 : 日本の行政機関が公開中のAPIについてのまとめ（2016年8月17日暫定版） http://blog.livedoor.jp/south_kanto_dm/archives/52143463.html 前書き この記事の目的は、日本の行政機関等が公開しているAPIを紹介する事です。 日本の情報技術は他国と比較して、立ち遅れている部分があり、これを立て直すのが喫緊の課題であると言えます。 日本政府もこの問題に危機意識を持ち、先日、経
ブラウザから使える O/R マッパ、 js-data を使ってみる - クックパッド開発者ブログ
ヘルスケア事業部の濱田です。花粉がつらい時期ですが、みなさん楽しく開発してますか？ おいしい健康では、JavaScript（以下 JS）で非同期にサーバ側のリソース操作を行う際に、js-data というライブラリを使っています。Rails ユーザにとってはとっつきやすい便利なライブラリですが、日本語での情報がほとんど見当たらなかったため、簡単にご紹介したいと思います。 js-data とは JS 製のデータ管理用ライブラリです。RESTful API などを通じて取得できるデータ（リソース）を抽象化して、CRUD 操作を統一したインターフェースで行えるようにしてくれます。 リソースごとにオブジェクト（モデル）を定義したり、find でデータを取ってくるなど、ActiveRecord などの O/R マッパのような使い勝手が特徴。設計等には Ember data の影響を受けています。 以下
Falcor入門 1日目 Falcorとは何者か - Qiita
はじめに 最近、ある程度の時間を割いてFalcorを触っています。 まだ日本語での情報は豊富とは言えない状況ですし、自分の理解を整理する意味も含め、何回かに分けてFalcorについて書いていきます。 1日目の今日は「Falcorとはどのような目的のために生まれ、どのような仕組みに依存しているのか」を説明します。 概念的な話ばかりでコードは殆ど出てきません。実装寄りの話は次回以降に書きますが、行ったり来たりしながら読むのも有りじゃないかなと思います。 ちなみに次回以降の目次はこちら： Falcor入門 2日目 FalcorのJSON Graphに触れてみる Falcor入門 3日目 Falcor Routerでサーバサイドを実装してみる Falcor入門 4日目 FalcorとReactを組み合わせる 昨今、Webアプリケーションの大半は、ReactやAngularなどのMVCフレームワーク
Java/Androidにおける例外設計、あるいは「契約による設計」によるシンプルさの追求 - Qiita
なぜ今Javaの例外処理か Javaにおける「チェック例外」はSwift、Objective-C、Ruby、JavaScriptといったネイティブ・ウェブアプリ開発でよく用いられる他の言語には現れないものです。 SwiftにはOptionalやErrorTypeがありますが、Javaにおいてもnullやエラーのハンドリングの実装方法をうまくやる必要があります。 なぜ例外を握りつぶしたらいけないのか、なぜアサーションが望ましいのか、なぜチェック例外と非チェックを分けたのか、という点を考えてみたいと思います。 参考資料 例外設計における大罪 （契約プログラミングについて） Effective Java読書会9日目 - 例外 （Javaにおける例外の扱いについて） 契約による設計から見た例外 （この記事の方がより詳しいけど難しいイメージ） チェック例外と非チェック例外の違い チェック例外→「回復
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
