今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
"死にゆく" 技術と "流行る" 技術の狭間で｜Ken Wagatsuma
2017 年、私は React.js および ECMAScript のキャッチアップをしていました。 スタートアップに転職してすぐのタイミング。転職先で React.js を使ったマークダウンエディタを開発していました。それまで Android や Node.js を中心として開発していたので、React.js をはじめとする View フレームワークは全く素人。かなりの時間をかけてキャッチアップしました。 一年後には、draft.js を始めとする OSS のコードも読めるようになりましたし、小規模のコンポーネントであれば自身で開発して GitHub で公開するようにもなりました。 正直、React.js で学んだ技術なぞ、すぐに枯れると思っていました。当時は View フレームワーク戦乱時代。React.js 以外にも Ember.js や Vue.js、Angular などさまざまな
Cloud Run上で動かすNext.jsアプリのDockerイメージサイズを軽くする
業務にて Cloud Run内でNext.jsアプリを動かすことになった。 その時イメージサイズについて四苦八苦した結果、ある程度の最適化ができたのでその時の検証結果をここに記しておく。 準備編：イメージサイズ検証のためのアプリケーション yarn create next-app コマンドのオプションを設定することにより、Docker内で動作するサンプリアプリケーションのテンプレートを作ることが可能なので今回はそれを利用して検証してみる。 以下のコマンドで nextjs-docker というアプリケーションが作られる。 $ yarn create next-app --example with-docker nextjs-docker ... $ cd nextjs-docker ＄ yarn dev yarn run v1.22.19 $ next dev ready - started
意外と簡単！Google Data Studio のコネクタの作り方（Qiitaのデータを表示する） - Qiita
{ "dataStudio": { "name": "Qiita Connector", "logoUrl": "https://ロゴのURL", "company": "コネクタの作者", "companyUrl": "https://コネクタの作者のURL", "addonUrl": "https://コネクタの詳細に関するURL", "supportUrl": "https://コネクタのサポート窓口のURL", "description": "Connect to your Qiita account" } } マニフェスト ファイルに記載した内容が以下のようにData Studioのコネクタの画面に反映されます。 事前準備３．Client IDとClient Secretを発行する OAuthを利用するためにはClient IDとClient Secretが必要です。Qiitaの
大きなPubSub、小さなPubSub。 - ぶれすとつーる
JavaScriptにおいてもそのほかの言語においても疎結合というのは結構大きなテーマの一つだと思います。 そんな疎結合を促す実装としてPubSubがにわかに脚光をあびてますね。 にわかというより定期的に盛り上がってる気がしますが。 僕はあまりデザインパターン厨ではないのであまり語れるようなことはないのですが疎結合なコードというのはコードの再利用性が高まり幸せ度がかなり高いものだと思います。 そんなPubSubを強力に後押しするライブラリは世の中星の数ほどあるわけですが、ほんの少しだけ融通が利かないなーって思うこともあって半年くらい前に自作しました。 そう、95%くらい車輪の再発明です。 その名もPubsubJS(https://github.com/nazomikan/PubsubJS)。 どこかですごく似た名前を聞いたことはあるわけですがまぁそのへんはおいといて何がいっぱいあるPubS
Teachable Machineでラーメン二郎の写真を学習させてみた - Qiita
ヤサイマシマシニンニクカラメ 皆さん、ラーメン二郎はお好きでしょうか？ ラーメン二郎は圧倒的なボリュームで人気のラーメン屋さんですね。 自分は以前の記事でも書いたようにラーメンが大好きなのですが、ラーメン二郎はたまに行くレベルです。 でもたまに無性に食べたくなり、食べに行ったら大体冒頭のコールで頼み楽しんでいます。 そんなラーメン二郎ですが、周りにもファンが多く、先日とある同僚が別の同僚に二郎の写真を見せたところ、それがどの店なのか言い当てるというシーンに出くわしました。 そこでふと思いつきました。 「二郎の写真を機械学習させたらどの店か見分けることができるようになるのか？」 という訳で、実際にやってみました！ Teachable Machineで学習させてみた 自分で機械学習の環境を用意するのは大変なので、今回はTeachable Machineを使ってみました！ （Teachable
歴史から学ぶECMAScriptとJavaScriptの違い - Qiita
ECMAScriptとJavaScriptの関係を知るには、その歴史を紐解いてみるのが良いかもしれません。 JavaScriptの誕生は、その生みの親であるブレンダン・アイクがNetscape1で動作するスクリプト言語を作るよう頼まれたことから始まります。Scheme2のようなパワフルさを持ち、Javaのような初心者でも簡単にコーディングできるような言語という無茶な要求でした。アイクは苦心した末にプロトタイプを導入することでこれらの課題を同時に解決する言語を開発しました。 言語が完成したあと、Netscapeのマーケティングチームは、マーケティングの一貫としてその言語に「JavaScript」と名付ける許可を、当時Javaの商標を持っていたサン・マイクロシステムズ社から取り付けました。JavaScriptがリリースされてから数年すると、MicrosoftのIEがそれを採用し、JScript
機械学習を使って分かりづらい端子の名称を教えてくれる仕組みを作ってみた - Qiita
皆さんこんにちは！現在会社のシステム部門で働いている会社員です。 突然ですが、端子の形状って多すぎだと思いませんか？USB端子もType-AとかCとか、2.0とか3.0があるし、ディスプレイに繋ぐケーブルもHDMI、DisplayPort、VGA等々、、、多いだけならまだしも、システム部門で働いているとこれらに関する問い合わせも来るのです。「このケーブルが何に使うかわからない」「このケーブルが欲しいんですけど」、と普段使っていない人からするとケーブルの名称なんかいちいち覚えてませんし、電話で形を説明されてもポカーンとなってしまいます。そこで、今回は機械学習を使って、端子の形状をカメラで写すと名称を教えてくれる仕組みを作ってみました。 こんな感じで作成することができました。それでは作成した方法をご紹介していきます。 使用ツール紹介 ・Google Teachable Machine（http
ESLintチームから200ドルもらった話 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ESLint チームから $200 いただきました！とても嬉しくありがたいです！ プログラマー人生の中でも、あまり無い経験だと思ったので駄文ですがこの経験を残そうと思います。 一応書いておくと私は ESLint の中の人ではありません。 まず簡単な時系列（日本時間） 3/26朝、ESLint TSCミーティングでコントリビューターの誰に今月分の寄付をするのが良いか話し合われる。 ミーティングメモのPR: https://github.com/eslint/tsc-meetings/pull/246 3/26朝、ESLint チームのリー
ブックマーク管理システム: 動くアプリをとにかく早く安く作ろう
autoscale: true ブックマーク管理システム: 動くアプリをとにかく早く安く作ろう asocial-bookmark https://github.com/azu/asocial-bookmark モチベーション: はてなブックマーク APIが壊れた => 困った 金曜にAPIが500 Internal Server Error返すという報告した CloudFrontがエラーを返してるので何かを設定ミス? { body: '403 Forbidden Insufficient scope', headers: { 'content-type': 'text/plain', 'content-length': '32', connection: 'close', date: 'Fri, 31 May 2019 05:24:36 GMT', server: 'nginx', 'se
フロントエンド DB で運用コストゼロ
最近はサーバーレスの SQLite が人気みたいですが、個人的には sql.js-httpvfs が好きです。 個人開発で運用コストをゼロにしたいなら、こちらのほうが気楽です。 sql.js-httpvfs は Accept-Ranges を利用して、 DB のすべてのデータを fetch することなく、必要な時にバイト単位での fetch を実現します。 つまり DB をフロントエンドに置いた運用開発ができます。 バイト単位での fetch を実現する Accept-Ranges の仕組みは、フロントエンド新時代を支える技術になる気がしています。 静的 DB はフロントエンドへ移行する ほとんどの開発において DB / ネットワークが最初にボトルネックになります。 昔から bytes-level fetch ができればフロントエンドに DB を置けるのにとは思っていたので、 Accept
Mock Service WorkerでAPIをモックして開発をスムーズに進められた話 - Classi開発者ブログ
こんにちは。開発本部 認証連携チームでエンジニアをしている id:ruru8net です。前回はこちらの記事を書かせていただきました。 tech.classi.jp 現在は認証基盤再建というプロジェクトの中で、主にフロントエンド開発を担当しています。この記事ではフロントエンド開発においてAPIのモックのために「Mock Service Worker」を使ったところスムーズに開発を進めることができたので、使い方を紹介したいと思います。 mswjs.io ツールの導入 弊社ではフロントエンドのフレームワークにAngularを採用しているのでAngularでの導入手順を記します。 基本的にはドキュメントの手順通りです。 1. インストール $ npm install msw --save-dev # or $ yarn add msw --dev 2. モックを定義 src/mocks/hand
個人サイトのビルドツールをwebpackからViteに移行した - valid,invalid
個人サイト https://ohbarye.github.io/ のビルドツールをwebpackからViteに移行した。 まぁ、移行と大げさに言っても、元々vanilla JSとSassでちょっと動きと装飾を付けただけのペライチページなのだけど。 実質ただのリンク集 理由 State of JS 2021のビルドツール部門でViteが1位になっていたが利用したことがなく気になっていたため。手元にある最小のフロントエンドプロジェクトが個人サイトだったのでplaygroundとして試してみた。 https://2021.stateofjs.com/en-US/libraries/build-tools より Viteとは Vite公式を斜め読みした。ランキング中だと経験あるビルドツールがwebpack, Parcel, Rollupあたりで止まっていたのでそこからの差分で理解すると... es
パーサーコンビネーターを使って自然言語風のテキストからパラメーターを抽出する - Namiking.net
CLI と違い、引数を渡す方法が標準化しておらず、パースを実装する必要があった。Slack の /remind スラッシュコマンドのように、自然言語風に Bot へのパラメーターを抽出したい。 /remind me to drink water at 3pm every day /remind me on June 1st to wish Linda happy birthday /remind #team-alpha to update the project status every Monday at 9am /remind @jessica about the interview in 3 hours 正規表現を使うと複雑になりがちな上のようなパラメーター抽出のため、パーサーコンビネーターを使って、パーサーを実装してみる。 実装したいこと 例えば、CircleCI の特定のジョブを
Next.js + Tailwind UI を使うとたった6時間で技術ブログのプロトタイプを作れる - パンダのプログラミングブログ
パンダとおくだが、Web業界の当たり前を「これって本当にそうだっけ？」と問い直すラジオを配信しています Gatsby から Next.js に載せ替えた動機 本ブログを Next.js でリニューアルしました。 元々このブログは Gatsby で作っており、2019年3月にリリースしましたが（最初の投稿）、ついに Next.js に移行しました。移行のモチベーションはバージョン追従を避けたこと、デザインを一新したいこと、また記事が表示されないというバグが発生する事象があったことです。 まず Gatsby のバージョンアップについて。現在、Gatsby の最新バージョンが4系です。しかし、自分が使っていたテンプレートは3年前に1系から使い始めて、2年前に2系にバージョンアップしました。その後、自分は業務と個人開発で Next.js を使い始めたため、このブログでしか使っていなかった Gats
Chaos Engineering on Frontend ~フロントエンドにカオス性を注入して信頼性を向上させよう~ - Qiita
Chaos Engineering の概念は、ほとんどの場合バックエンドのコンポーネントに対して適用されます。 Netflix では Chaos Monkey、Gorilla、Kong などのツールを構築することで、様々なシステム、ゾーン、さらにはリージョン全体がダウンした時に、サービスが存続可能であるように継続的にテストを行っています。 さて、Web アプリケーションを構築する上で、サーバサイドだけを気にかけるだけでよいのでしょうか。 信頼性の高いバックエンドインフラストラクチャとアプリケーションを維持することは重要ですが、ユーザーの要求を満たした後でも、うまくいかないことがたくさんあります。 Web ページの読み込みが遅くなる可能性があり、画像やスクリプトのダウンロードに失敗する可能性があり、地理的な距離が大きいと、大幅な遅延が発生する可能性があります。 これらはユーザーエクスペリエン
詳説GraalVM(4) GraalVMが組み込まれたデータベース - Fight the Future
こちらのツイートが話題になっていました。 MySQL MLE Pluginはマルチ言語VMであるGraalVMを内包することでMySQL上で複数の開発言語でストアドプログラムを作成/実行可能とする。近日中にMySQL Labsで利用可能となる予定。まずはJavaScriptのサポートから。MySQLデータ型およびPythonのサポートを準備中 https://t.co/MSxhcROA7e #mysql_jp— MySQL_Jp (@mysql_jp) April 28, 2018 GraalVMは組み込みが可能です。MySQL MLE PluginでMySQLにGraalVMを組み込み、JavaScript/node.jsを（将来的にはその他言語も）データベース上で実行できるようになります。 MySQL MLE Pluginはまだリリースされていないのですが、実はOracle Datab
V8エンジンによる内部変換コードでasync/awaitの挙動を理解する
はじめに JavaScript の「非同期処理」ってやっぱりかなり難しくないですか？ 自分も色々試行錯誤しましたが、結局「完全に理解した🤓」→「やっぱり何も分からん😭」っていうループの中で泥臭く理解を深めていくしかないようです。 さて、非同期処理の制御をある程度予測できるようになるには、非同期 API を提供する環境のことやイベントループ、マイクロタスクなどの仕組みについて理解する必要があります。 そして環境に埋め込まれた JavaScript Engine のことも理解する必要があります。 今回の記事では、JavaScript Engine の１つである V8 が内部で変換するコードから async/await の挙動を理解するための解説を試みたいと思います。V8 エンジンからアプローチすることで async/await の分かりづらい挙動を掌握して非同期処理を打倒します。 今回の記
D3.jsと学ぶVisualization（可視化）の世界
CAジャーナルクラブ Dremel: Interactive Analysis of Web-Scale Datasets
高速 scatter plot 描画（apache-arrow + regl 利用） - Qiita
こんにちは。 apache-arrow (IPC) データをプロットしました1。データ (columnar typed array) を取得しそのまま regl の WebGL バッファーへ書き込むことにより高速描画を行なっています。 この例のデータの取得（ダウンロード）進行中は、データは逐次分割されて取得され（10,000行単位）、その都度、データを追加して描画しています（ストリーム型処理）。 ただし、データの取得自体はネットワークを通したダウンロードなので高速ではありません2 3。 ソースおよび実行例はこちら、 regl + apache-arrow: fast WebGL scatter plot (bl.ocks.org) 参考：Efficiently loading massive D3 datasets using Apache Arrow (Chris Price, scot
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
