なぜJestのmockライブラリに混乱してしまうのか？ - Qiita
はじめに JavaScriptのモックライブラリでは、 sinon などが有名であるが、テスティングフレームワークに Jest を使ってるならば Jest組み込みのモックライブラリで済ませたほうが学習コスト少なくて済むだろうと思える。 しかし、 sinon の感覚でJestのモックライブラリを使おうとすると違和感というのか、モックへの考え方の違いに気づかされる。 ということで今回は、Jestのモックライブラリの考え方と使い方を整理していきたいと思う。 モックの用語整理とJestモックライブラリの位置づけ モックと一言でいっても、それが指す内容は微妙に異なる。 ここでは、モックを 広義のMock Object と 狭義のMock Object と分けて整理してくれているテスト駆動開発を参考に用語を整理する。 テスト駆動開発では、モック用語を、下図のとおり、テストダブルとそのサブクラスとして
オープンデータを使って住所検索ライブラリを作りました - Qiita
オープンデータな住所データを使用して文字列と緯度経度で住所検索できるNode.jsのモジュールを作りました。 japan-address-search https://github.com/uedayou/japan-address-search 従来、住所検索を行う場合、GoogleやYahooなど外部のWebサービス・Web APIと連携して検索するものが多いと思います。少数のデータを検索する場合は特に問題ないですが、大量のデータを検索したい場合には外部サービスの制限やレスポンスの問題など利用するには不向きです。 このモジュールは、モジュール内のデータについて検索するので、大量のデータでも外部サービスに影響なくローカルで検索することができます。 このモジュールは、経済産業省のIMIコンポーネントツールを元に作成していますので、住所表記の正規化も行えます。 npmリポジトリにも公開してい
Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理 - Qiita
Concurrent Modeは、現在（2020年3月）実験的機能として公開されているReactの新しいバージョンです。Reactの次のメジャーバージョン（17.x）で正式リリースされるのではないかと思っていますが、確証はありません。なお、React公式からもすでに結構詳細なドキュメントが出ています。 並列モードの導入（実験的機能） Concurrent Modeに適応したアプリケーションを作るためには、従来とは異なる新しい設計が必要となります。筆者はConcurrent Modeを使ったアプリケーションをひとつ試作してみました。この記事から始まる「Concurrent Mode時代のReact設計論」シリーズでは、ここから得た知見を共有しつつ、Concurrent Mode時代に適応したReactアプリケーションの設計を提案します。 なお、Concurrent Modeはまだ正式リリース
javascriptで文字コード変換 - Qiita
概要 javascriptの文字列はUTF-16で String#charCodeAt(i) で取得出来る数値は2byte(0x0000から0xffff)になる。 escape("あ") は UTF-16がそのままエスケープされ "%u3042" になるが encodeURI("あ"),encodeURIComponent("あ") などではUTF-8に変換されて "%E3%81%82" になる。 var str = "文字列をUTF-8に"; var utf8str = unescape(encodeURIComponent(str)); var utf16str = decodeURIComponent(escape(utf8str)); if (str == utf16str) {alert(true);} //=> true とすることで UTF-16<=>UTF-8 の変換は出来
フロントエンドを100倍速くした（ ＾ω＾） - Qiita
おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小
C++からRustに移行して1年経って思ったこと - Qiita
はじめに この記事は「プログラミング技術の変化で得られた知見・苦労話【PR】パソナテック Advent Calendar 2020」のために書かれたものです。 僕は去年の11月から一念発起してRustの勉強を初めて趣味で同人ゲームを開発しています。元々C++を4年程使っていて「C++最高、みんなC++使おう」とか友人に布教していました。しかし、C++プログラマは「一番自分たちの言語の批判に対して強くなる」と言われるほどC++はよくディスられます。もちろん僕も例外ではありませんでした（笑）。 一応僕もPythonを適当に使うようになってからC++のcppとhppを組み合わせるようなCの名残を感じるところや他言語と比べたときの標準ライブラリの貧弱さ、コードが冗長になりやすい点など使いにくいなあと思いはじめましていました。ですがPythonはあくまでも適当に使ってただけでしたし、一通り書けるJa
GoでYAMLを扱うすべての人を幸せにするべく、ライブラリをスクラッチから書いた話 - Qiita
この投稿は、 Go アドベントカレンダーの 6日目のものになります。 はじめに GoでYAMLを扱う際にデファクトになっているのは、おそらく github.com/go-yaml/yaml でしょう。 実装はC言語で実装された libyaml を Go に移植しつつ、 Go ならではの機能を足す作りになっているのですが、 cgo を使わずに pure Go で移植されており、開発者の気合を感じます。 枯れている libyaml を利用していることからも、 YAML の仕様を忠実に実装していることが期待できます。 ですが、このライブラリにはいくつか使いにくい点もあり、例えば以下のようなことはできませんでした 構造体を埋め込む場合に、埋め込む型をポインタで定義できない ( ※ ポインタなしは大丈夫 ) encoding/json とコンパチの インターフェース ( MarshalYAML()
Reactでレンダリング回数やレンダリングにかかる時間をユニットテストでテストできるライブラリを開発しました - Qiita
import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import { perf, wait } from 'react-performance-testing'; test('countボタンをクリックした時に、2回レンダリングする', async () => { const Button = ({ name, onClick }) => ( <button type="button" onClick={onClick}>{name}</button> ); const Counter = () => { const [count, setCount] = React.useState(0); return ( <div> <span>{count}</
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話 - Qiita
Storybook6をVue.jsのプロジェクトに導入し、新機能であるStorybook Argsを活用してVue.jsのDXを最高にした話JavaScriptVue.jsフロントエンドJeststorybook はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがかなりモダンであり、開発体験が良く、ノウハウをどんどん公開して良いと言っていただけたので、その内容を共有するシリーズです. 今回は2日前にリリースされたStorybook6をVue.js + TypeScriptのプロジェクトに導入した話をします(執筆時点). 前置き Storybook自体はずっと使っていたのですが、6系に関してはbetaの頃からrfcとreleaseノートを全て追っかけて追っかけはじめ、使っていました. そしてついにrcが取れたので今回はその内容とiC
Rustのツール周りがモダンだって話 - Qiita
Rustは最近の言語だけあって、いろんな言語のベストプラクティスがうまく取り入れられている。特にツールまわりは最初から簡単に使える上に、柔軟性もあって使い勝手がよい。さらに、より現在的な開発のあり方をサポートするために一歩進んでいると感じるところもある。RustのビルドツールであるCargoとテスト・ドキュメンテーションについて、面白いと思った所を紹介する。 言語自体の話はこちらに書いた。 - Rustのプロジェクトを始める前に知っておきたかったこと - Rustのプロジェクトで型に困惑した話 Cargo 依存ライブラリの設定 Cargoの設定ファイル(Cargo.toml)では、依存するライブラリを下記のように指定する。ここで指定されるライブラリの単位をRustではCrateと呼ぶ。 [dependencies] lambda_runtime = "^0.2" futures = { v
Adobe製デザインシステム「React Spectrum」がすごいので紹介したい - Qiita
🚀 Super excited to announce: ♿️ React Aria — Accessible UI primitives for your design system. 👑 React Stately — State and core logic for your design system. 🌈 React Spectrum — Adobe’s design system. Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020 7月15日にAdobeのデザインシステム react-spectrum がリリースされました。 デザイン製も優れていますが、他の部分でのクォリティーが個人的にショックだった
Reactで管理画面をつくるときに便利だったライブラリ集と所感 - Qiita
主に未来の自分用 material-ui Material DesignをReactでコンポーネント化したもの UIパーツになっているのでパパっと使えるし、あとでカスタマイズするときもけっこう融通が効く 現在1.0.0がbetaでアップデートが激しく破壊的変更も多いので、場面に合わせてStableとどちらを採用するか決めるのがよい。 v1がStableになった react-admin REST API（やGraphQL）を叩くクライアントとして最適化された感じの管理画面コンポーネント集 インデックスがあって、閲覧ページがあって、登録ページがあって、みたいなよくある画面が素早くつくれる Material UIを内部で使っていて、さらに管理画面用に高レベルなコンポーネント（テーブルとか新規作成フォームとか）が実装されている カスタマイズ性もまぁまぁ高い。CRUDではないエンドポイントでも拡張可
yarn upgrade-interactive と同じように npm でも対話型な更新をしたい！ - Qiita
前書き ところで皆さん、パッケージマネージャーは yarn と npm どちらを利用していますか？ yarn のリリース直後、「高速なダウンロード！lock ファイル (yarn.lock) による依存ライブラリのバージョン固定！最&高！」と感動し、 npm から yarn に切り替えたのを覚えています。 しかし、npm v5 のリリースにより、速度が改善され、更には lock ファイル (package-lock.json) が生まれました。 この時から、「あれ、yarn って必要？」と思うようになりました。 npm に切り替えたいですが、 yarn には upgrade-interactive コマンドという大変便利な、対話型な更新が可能なコマンドを標準で備えています。 ※ yarn upgrade-interactive について知りたい方は、こちらを参照するのが良いです。 「npm
TypeScript + Tynderから始める宣言的検証生活 - Qiita
皆さんは JSON Schema 使ってますか？ 現在では、Web APIのペイロード定義・検証、モックサーバー作成、ユーザー入力フォーム検証、設定ファイルのスキーマ定義・検証・IDEでのエラー表示など、多くの場面で、また多くの言語でライブラリが整備され利用されています。 JSON Schemaの強み Internet draftのフォーマットで仕様が公開されている 多くの言語での多くの実装（言語によっては複数）が存在する 1回書けば、フロントエンド、複数のバックエンドすべてで利用できる可能性が高い 代替実装が存在すると競争原理が働く JSON Schemaの嫌いなところ 見辛い 書き辛い 数行の小さなスキーマならばともかく、JSON Schemaって本当に苦痛。汎用のデータフォーマットを人が直接記述するレイヤーのDSLにするのは正直辛い。ヒューマンリーダブルだからといって人が読めるとは限
git-secretsとhuskyを同時に使用する
はじめに 機密情報をコミットしないようにgit-secretsの設定をしようとしたところ、既にprecommit用のNode.jsライブラリhuskyがインストールされていたため、コンフリクトしてgit-secretsの設定ができませんでした。 どっちとも使いたかったので、それぞれ動くように工夫してみました。 2019/07/10 追記 会社の @aki77 さんが、もっと良い方法を見つけてくれたので、 そっちを「方法1」として追記しました！ 方法1: husky内でgit-secretsを呼び出す gitのhooks内では、デフォルトのままhuskyだけが呼ばれるようにしておき、 huskyでのチェック項目の1つとして、git-secretsを呼び出します。 lint-stagedも併用します。 git-secretsをグローバルにインストール
「zeit/swr」のpagination exampleでScroll Position Restoreを試す - Qiita
こちらはNext.js Advent Calendar 2019の22日目の記事です。 はじめに 例えばYoutubeをスマホで見ていたときに、↓のように一度ページ遷移をしてからブラウザバックしたときにスクロール位置が一番上まで戻ってしまった経験はないでしょうか。 これはSPAが抱える課題の1つで、解決するためには「Scroll Position Restore」と呼ばれる「スクロール位置の保持」とその「リストア（復元）」が必要です。 また、それ以外にも「もっと読む」などで画面内に非同期で要素が追加された場合はその要素も合わせて復元しないと正しいスクロール位置には戻れません。これには複雑なStateの管理も必要になってきます。 このように「Scroll Position Restore」を実現するにはいくつか超えなくてはいけない壁があります。 zeit/swr の登場 2019年10月、
Node.jsでのCLIの作り方と便利なライブラリまとめ - Qiita
はじめに Node.jsでCLI(Command Line Interface)を作りたくなることがあると思います。 そして、GitHubに公開されているCLIを見ると、色々なライブラリを組み組み合わせて便利なCLIを作っているようです。 この記事では、Node.jsでCLIをどう作るのか？そして、CLI開発を支える便利なライブラリを紹介します。 身の回りのCLI CLIの作り方を見る前に、普段の開発で触れているCLIを見てみましょう。 ESLint CLIには基本的に--helpオプションが用意されていますね。 npm ユーザーの入力を受け取る対話的なCLIも多いですね。 expo プレースホルダーがあることで入力する内容のイメージを伝えることができます。 stencil 様々な選択方法をユーザーに提供したり、分かりやすく色付けすることも可能です。 それでは、Node.jsでCLIを作っ
Redux不要論と、グローバル状態管理ライブラリReactNの紹介 - Qiita
若干強めのタイトルです。あらゆるケースでReduxが不要と主張するつもりはありません。 しかし、Reduxが不要と思われるケースでもReduxが使われることを避けるため、「Reduxは必ず採用しなければならないものではない」ということを意識していただきたく、刺激的なタイトルで始めました。 （個人的にはむしろ、積極的に採用すべき理由がなければ採用しない方が良いくらいに思っています） （MobXとか他のライブラリについては一旦置いておきます） Reduxのメリット Redux's motivation 曰く、SPAに於けるstate管理とDOM操作の複雑性のうち、Reactがviewレイヤの問題を整理しようとしている。Reduxはstate管理の部分を担当し、stateの変更を予測可能なものにする（to make state mutations predictable）ことを目指しているとのこ
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
0からScalaを本番導入して感じたこと・考えたこと - Qiita
