https://developer.yukimonkey.com/article/20200219/
Storybookとreg-suitで気軽にはじめるVisual Regression Testing - wadackel.me
約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして
Puppeteerでできることまとめ
GMOアドマーケティングのy.a.です。 PuppeteerはHeadless Chrome使うのを便利にするNode ライブラリです。 https://developers.google.com/web/tools/puppeteer/ （引用元：Puppeteer | Tools for Web Developer https://developers.google.com/web/tools/puppeteer/） ですのでスクレイピングなり、なにかWebページのテストを自動化したい場合に、比較的手軽に色々できます。 そこでPuppeteerに興味を持った方へ、なるべく簡潔にPuppeteerで出来ることをいくつか紹介したいと思います。 ※なお実行環境にNode.jsがインストールされていることが前提です。 インストール
2020年の11の必見のフロントエンドトレンド - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こちらの記事は、Jonathan Saring 氏により2019年12月に公開された『 11 Must-Know FrontEnd Trends for 2020 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 2020年の11の必見のフロントエンドトレンド ランチ中のフロントエンドトークでスマートに見られる方法！ チームのランチトークでスマートに見られることは、最新のフロントエンドのトレンドを常に把握しておくための大きな理由であることは言うまでもない。 それは、あなたがより良い開発者になり、より良い技術とより良
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
Nuxt.jsでできること では、Nuxt.jsで何ができるのでしょうか？例えば、次のようなことができます。 SSR（サーバーサイドレンダリング） SSR（サーバーサイドレンダリング）とは、「JavaScriptをサーバー内部で実行してHTMLを生成し、クライアントに返す仕組み」です。JavaScriptは本来Webブラウザ上で実行されるものでしたが、サーバー側で実行することにより、処理を早められます。 処理は下図の流れで行われます。 ルーティング ルーティングとは「クライアントからのリクエスト内容と、サーバー処理を関連付ける動作」です。Nuxt.jsは、ルーティングが簡単に設定できるようになっています。どのように簡単になっているかは後述します。 head要素の管理 metaタグの管理を、JavaScriptのオブジェクトベースで記載できます。設定ファイルに記載してフォーマット化しておけば
Babel7.4で非推奨になったbabel/polyfillの代替手段と設定方法
Babel7.4.0 から、長いことお世話になってきた @babel/polyfill が非推奨となりました。加えて、@babel/preset-env と @babel/ransform-runtime が core-js@3 に対応したようです🎉 これらに伴いpolyfill周りの設定方法が変わったので、その内容をメモしておこうと思います。 Babel と core-js の関係のおさらい これからのpolyfill設定方法 1. preset-env と useBuiltIns:usage で必要なpolyfillだけ読み込む方法 2. preset-env と useBuiltIns:entry で全polyfillを読み込む方法 3. transform-runtime を使う方法 Proposal の使い方 参考 Babel と core-js の関係のおさらい Babelが
yarn-deduplicate(1) で yarn.lock の重複エントリを最適化する - Islands in the byte stream
追記(2019/03/18): yarn-toolsからyarn-deduplicateが独立して使いやすくなり、 --strategy でdedupeの方法を選べるようになっています。タイトルも変更しました。 yarnpkg(1) を使って依存関係を管理しているとき、 yarnpkg upgrade-interactive は対話的にライブラリのアップデートができるので大変便利です。しかし、これを実行すると yarn.lock に不必要に重複エントリが作られることがよくあります。 nodejsで実行するケースでは重複があっても問題がないことが多いのですが、 クライアントサイドでは重複があると単純にファイルサイズが大きくなり。また、@types/* や react, jquery といったフレームワークはどの環境でも動作に問題が出たりするので、重複エントリは問題です*1。そこで今までは、
HTML要素の幅を小数点以下まで取得する方法
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。 jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。 HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文
yarn upgrade で更新できない間接的な依存パッケージだけをアップグレードするには - Qiita
TL; DR: yarn v1 の場合、 yarn.lock から当該のパッケージのセクションを削除して yarn install すればアップグレードできる。 2021年9月9日追記： yarn v2 以降では yarn up -R パッケージ でアップグレードできるようになった。 困ったこと GitHub にソースコードをホストしているとある npm パッケージにおいて、 GitHub の Security Alerts が fstream < 1.0.12 の脆弱性を報告した。 yarn upgrade fstream で最新バージョンにアップグレードしようとしたが…… $ cd my_npm_pkg $ yarn upgrade fstream yarn upgrade v1.16.0 [1/5] 🔍 Validating package.json... [2/5] 🔍 Res
Kotlin/JS の現状を確かめる - Qiita
Kotlin は 1.1.4 を使って試行錯誤した上で、1.2.0 でも動作することを確認しました。その他諸々のバージョンは build.gradle で確認できます。 成果 調査結果のまとめを述べておきます。 JavaScript ライブラリは容易に使えるが、型の付与は手動 アノテーションを付与すれば JavaScript ライブラリを参照できる React のラッパーは JetBrains さんが提供している ts2kt という TypeScript の型定義を Kotlin コードに変換する公式(?)ツールはあるが、ツライ 生成された Kotlin コードは Deprecated だらけ dynamic 型が多く、型チェックされない ビルド環境に kotlin-frontend-plugin という公式(?) Gradle プラグインはあるが、ツライ kotlinconf-app で
esModuleInterop オプションの必要性について - Qiita
個人的にちょうど該当の問題を取り扱ったので、TypeScript 2.7.1 で導入された esModuleInterop オプションの役割と背景についてまとめておく。 なお、本来は export と import の両方に影響するオプションだが、この記事では外部の npm パッケージを import する状況のみを取り上げる。 TL;DR Node.js 環境で import/export を使う場合、 esModuleInterop オプションを積極的に有効にする。 関数や class を export するモジュールを import する場合、import * as _ from '_' のかわりに import _ = require('_') を使う。 モジュールの互換性 先にTypeScript の ES6 modules の解釈と allowSyntheticDefaultI
Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita
お知らせ（2021/05/26 追記） 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLint で Prettier を実行するためには、ESLint の Plugin が必要でしたが、これを利用することが公式で推奨されなくなりました（詳細はこちら）。 そのため、記事を更新して Prettier と ESLint をそれぞれ実行させるような内容に変更しました（ついでに husky のバージョンも上げており、それに関する内容も更新しています）。 更新前のコードや記事は以下にありますので、必要に応じてご確認ください。 はじめに Prettier（v.2.3.0） に関しての備忘録です。 「Prettier の何が便利なのかよくわからない」 「ESLint
TypeScript on ESLint の未来 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? The future of TypeScript on ESLint:https://t.co/PTCWKWN22s — ESLint (@geteslint) January 18, 2019 ESLint の TypeScript サポートの今後について、公式にアナウンスがありました。 要点をまとめると、 TypeScript チームが TSLint から ESLint に切り替えていくと発表したよ。 ESLint チームと TypeScript チームが協力して開発を進める場として、typescript-eslint プロジェクト
React Nativeとは何か？ 基本の仕組みと使いどころを理解する
WebブラウザとAndroid、iOSが、アプリの動作環境としてそれぞれ市民権を得た現代では、サービスを1つ作るだけでも、各プラットフォームに対してアプリを提供することが当たり前のように求められます。本連載では、この問題に立ち向かうため、ReactとJavaScriptによるWebアプリケーション開発に近いお作法でAndroidやiOSのアプリ開発ができるツール「React Native」を紹介します。まずは、React Nativeというツールがどういった仕組みで動いているのか、また、どういった分野に向いているのかを解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 Androidアプリ開発の経験者 iOSアプリ開発の経験者 前提環境 本記事の内容は、React Native v0.57.4の実
ExpoではじめるReact Native開発環境の構築
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 Androidアプリ開発の経験者 iOSアプリ開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Mojave 10.14.2 Node.js 11.7.0／npm 6.5.0 expo-cli 2.6.14 Node.js環境が準備できていない方は別途インストールしてください。Mac環境であればnvmやnodebrew、Windows環境であればnvm-windows等のバージョン管理ツールの利用をおすすめします。 React Nativeでできること 前回の記事では、React Nativeがブラウザの方法論でUIを実装しつつも、UI以外の構造としてはモバイルアプリに近いものであると説明しました。では、実際にJavaScriptで利用でき
dev.toがなぜinsanely fastを実現出来ているか - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? INSANELY FAST Qiitaを読んでる人なら https://dev.to をほとんどの人が見たはず。見てない人は見てきてください、速すぎて驚くはず。またmizchiさんがdev.toに書いた なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか - dev.to を見た人も多いと思う。個人的にHeroku, Railsを採用してここまで爆速なサイトを構築出来ていることは今までの常識を覆す衝撃な出来事だった。こんな新しい発見をもたらしてくれたdev.toには本当に感謝してる。自分もこんなサイト作ってみたいな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
core-jsを読み込んだけど、IE11で"Exception thrown and not caught"というエラーが発生する - Qiita
Railsプロジェクトでvue.js + typescriptを使うためのts-loaderの設定 - Simple minds think alike
Serverless Frameworkの使い方まとめ - Qiita
The best Rollup config for TypeScript libraries
