中級者のためのCypress入門：E2Eテスト自動化
Cypressは軽量・直感的な上、安定したテスト自動化を実現する工夫が施されたWebアプリ用テストフレームワークです。JavaScriptで構築されておりブラウザ上の動作や変更の検知に強みがある反面、マルチブラウザ非対応などの制約事項も存在します。この記事では、Cypressの特徴における全体像や強み・制約事項、高速化・安定化のためのデザインパターン、選定のための基準を紹介します。 記事のおおまかな構成 Cypressとは何か？特徴・他の技術セットとの違い Cypressを選ぶと何が嬉しいのか？ テスト高速化・安定化のためのデザインパターン: Application Actionsとは？ Cypressを使うべき条件・使わないべき条件は？ 想定する読者 Web開発やE2Eテスト実装の経験があり、基礎は特に求めていない方 UIテスト自動化の選定に悩んでいる方 Cypressを概要レベルで理解
Web 側コードからネイティブ側コードを呼び出す - Microsoft Edge Developer documentation
WebView2 を使用すると、オブジェクトを Web に渡すことにより、アプリケーションがアプリケーションの Web 側とネイティブ側の間のギャップを埋められます。 ネイティブ コードで定義されている中間ネイティブ ホスト オブジェクトを使用して、選択したネイティブ側 API を Web ページ JavaScript に公開します。 ネイティブ側 API は、WebView2 AddHostObjectToScript API を使用して JavaScript に投影されます。 この記事では主に Win32/C++ について説明し、フレーム内の .NET/C# のいくつかの側面についても説明します。 WinRT については、「 Web 側コードからネイティブ側の WinRT コードを呼び出す」を参照してください。 AddHostObjectToScriptを使用する理由 WebView2
AUN[あうん]｜登録不要の修正依頼・指示ツール
対応ウェブブラウザ Internet Explorer 8 以降（8-10は機能制限あり） Firefox 最新版 Google Chrome 最新版 Safari 最新版（クリップボード使用不可） Opera 最新版（クリップボード使用不可） ファイルアップロード機能 Internet Explorer 10以降、Chrome最新版、Firefox最新版、Safari最新版、Opera最新版 クリップボードアップロード機能 Internet Explorer 11以降、Chrome最新版、Firefox最新版 JavaScript 有効にする インターネット接続回線環境 56kbps以上、ブロードバンド環境推奨 画面の解像度 1024×768ピクセル以上 Cookieの利用について クッキー（Cookie）とは、Webサイトが利用者のコンピュータに送信してくるデータファイルです。 クッキ
![AUN[あうん]｜登録不要の修正依頼・指示ツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/80d7ef00157a95f1026eb6ba3e952aeffe00b3f2/height=288;version=1;width=512/https%3A%2F%2Faun.tools%2Finc%2Fimages%2Fogp-image.jpg)
今更調べてみる Ruby on Rails7 フロントエンド周りの選択肢(と個人的な採用方針) - Qiita
Ruby on Rails7ではWebpackerがデフォルトで無くなったらしい... え？マジ？じゃあJavaScriptのバンドルとかどうすんの？ Rails7に触れる機会がなかったのでこの辺りの疑問をながらく放置してきたが、いい加減調べることにした。 何番煎じだい？という内容だが、2023年初頭時点で見えているものとして、まとめることに意味があると信じたい。 前提 対象読者 Rails7のフロントエンド周りに関して、大きく変わったらしいということは知っていてもそれ以上詳しいことは知らない人。 この記事の目標 個人的に 採用する Rails7のフロントエンド周りの選択を固める まとめ importmap-rails Hotwire(turbo-rails + stimulus-rails) sprockets-rails tailwindcss-rails を個人的には採用していこうと
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 | 東京のWeb制作会社 株式会社クーシー
【DockerでReactの環境構築】エンジニア1年生と学ぶコンテナ構築までの手順 システム開発 プログラミング 今回は、Dockerを使用してReact（React.js）の環境を構築する手順を紹介します。 Dockerでの環境構築は慣れていない人にはやや複雑です。本記事では画像つきで、初心者でもできるようにわかりやすく解説します。 実際に環境構築を行いながら書きましたので、トラブルもありました。その時の対応についてもそのまま載せてありますので、あなたのケースでお役に立つかもしれません。 ではいってみましょう。 React.jsとは？ React.jsはReactと同じもので、「React」と書かれたり「React.js」と書かれたりします。 React.jsは、Facebookが開発したJavaScriptライブラリです。コンポーネントと呼ばれる小さな部品を組み合わせて大きなアプリケー
ProseMirrorで作るちょっとだけリッチなテキストエディタ | 株式会社ヌーラボ(Nulab inc.)
はじめに Backlogは昨年（2021年）メンション機能を導入しました。本文中に他のユーザーの名前を書くと、相手に通知が送られるというものです。それにともないこのメンション機能が使える箇所で使うテキスト編集コンポーネント（以下、エディタ）を作り直しました。 編集中のテキストに含まれるメンションを、見た目的にもデータ的にも通常のテキストとは異なるものとして扱えるようにするためです。 Backlogの以前のエディタはtextarea要素で実装されていました。textarea要素はプレーンなテキストしか扱えず、テキストの一部を太字にするとか背景色をつけるといった機能はありません。 ブラウザ上でテキストエディタを実装する手段には、textareaのほかにcontenteditable属性をtrueにした要素を使う選択肢もあります。この場合はHTMLの表現力が使えるのでメンションの表示をいい感じに
Rails7時代のJS/CSSバンドルの新常識 – <hazm.jp />
Rails7では、jsをバンドルせずにimportmapでjsを直接読み込む方式がデフォルトとなりました。しかしwebpack等でのバンドル方式の選択肢を完全に失ったわけではありません。特定のターゲット（ES5など）にトランスパイルすることができます。レガシーブラウザをサポートする要件下ではバンドル方式を選択することもあるでしょう。そこで来たるRails7時代に、我々アプリケーションエンジニアにとってどのような手段があるのか、Railsの基礎知識をアップデートしていくのがこの記事の目的になります。早速始めましょう！ JSの読み込ませ方 かつてのRailsではSprocketsでバンドルして単一のjsファイルとして配信する方法が常識でした。Sprocketsはトランスパイルはしないものの、minifyする仕組みを持っていました。 Rails7からは、importmapまたはwebpack/e
Railsの技: "プログレッシブエンハンスメント"でHotwire的思考を身につける（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Thinking in Hotwire: Progressive Enhancement | Boring Rails: Skip the bullshit and ship fast 原文公開日: 2022/08/16 原著者: Matt Swanson サイト: Boring Rails 日本語タイトルは内容に即したものにしました。 Turboについては以下の記事もどうぞ。 参考: 猫でもわかるHotwire入門 Turbo編 Hotwireを始める方法や個別のパーツの利用法を学べるチュートリアルはたくさんあります。しかし私は「Hotwireで考える」コツを会得するのにしばらく時間がかかりました。 Hotwireそのものは「HTML-over-the-wire」という包括的なコンセプトに過ぎず、以下のような部品をいつどのように
WebAssembly の概要 - WebAssembly | MDN
この記事では、WebAssembly がどのように機能しているか、その目標、解決している問題、ウェブブラウザーのレンダリングエンジン内での動作などの概念について説明します。 WebAssembly は最近のウェブブラウザーで動作し、新たな機能と大幅なパフォーマンス向上を提供する新しい種類のコードです。基本的に直接記述ではなく、C、C++、Rust 等の低水準の言語にとって効果的なコンパイル対象となるように設計されています。 この機能はウェブプラットフォームにとって大きな意味を持ちます。ウェブ上で動作するクライアントアプリで従来は実現できなかった、ネイティブ水準の速度で複数の言語で記述されたコードをウェブ上で動作させる方法を提供します。 それ以上に、その利点を享受するために利用者は WebAssembly のコードをどのように作成するのか知る必要さえ有りません。 WebAssembly モジ
WebAssembly Reference Typesで、WasmでDOMを操作する壁がここまで下がった
WebAssembly Reference Typesで、WasmでDOMを操作する壁がここまで下がった きっかけ（となったtweetの訂正） もう1ヶ月以上も経ってしまったが、こちらのtweetの公約どおり、WebAssembly (Wasm)におけるDOMの操作について知っている限りのことを書こう。 まずこの節の見出しのとおり、上記の発言は大きく間違えている。私はReference Typesがもたらすパフォーマンス的なメリットや、JavaScriptのオブジェクトを直接Wasmで渡すことが（一応）可能になったということを根拠に上記のtweetをした。しかし下記のtweetでも否定されているとおり、この観点は穴だらけなので、実際のところ多くの人が「直接操作できる」と実感できる状態ではないだろう。 詳細は後述するとして、我ながらひどい凡ミスを犯してしまった。JavaScriptのことを十
WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly入門 ─ Webフロントエンドの現実的なユースケースを知り、Wasm製アプリケーションを体験してみよう！ WebAssembly（Wasm）は、ブラウザー上で直接動くプログラミング言語として、JavaScriptを置き換える期待が寄せられますが、実際にWasmが果たすべき役割や適したユースケースとはどういったものでしょうか？ Wasmの動作を体験するチュートリアルとあわせて、山本悠滋（igrep）さんが解説します。 WebAssembly（以下、略称の「Wasm」と呼びます。「キャズム」や「～イズム」などからの類推なのか「ワズム」と発音するようです）とは、ブラウザーをはじめとするさまざまな環境で動作する、仮想マ
スクリーンキャストを写経しながらHotwireを理解する（その１） - Qiita
はじめに hotwire-railsの勉強にあたって、スクリーンキャストの内容を写経しながら理解した動作について、備忘録として投稿させていただきます。 投稿してる人の理解度 Hotwireを利用すればRailsアプリでSPAが実現できる。 もくじ スクリーンキャストを写経しながらHotwireを理解する（その１） - 0:00 ~ 0:55 Hotwire の 説明 - 0:56 ~ 2:21 Hotwire を 導入する準備 スクリーンキャストを写経しながらHotwireを理解する（その２） - 2:22 ~ 3:16 ページの一部 を turbo-frame にする - 3:17 ~ 3:35 turbo-frame内のリンク から 別ページへ遷移できるようにする スクリーンキャストを写経しながらHotwireを理解する（その３） - 3:36 ~ 4:38 turbo で ページ全体
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成
AWSのローコード開発ツール「Amplify Studio」が正式リリース。Figmaと連携してプロトタイプからコードを自動生成 Amazon Web Services（AWS）は、Webアプリケーションを最小限のコーディングで開発できる、いわゆるローコード開発ツール「Amplify Studio」の正式リリースを発表しました。 Announcing AWS Amplify Studio is in general availability: FREE pixel-perfect Figma-to-React conversion Bind UI components to data Extend React components in code Works seamlessly with Amplify backends Check out the launch blog!https:/
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - ruby/ruby.wasm: ruby.wasm is a collection of WebAssembly ports of the CRuby.
猫でもわかるHotwire入門 Turbo編
rails 7.00における "cannot load such file --sassc"の解決法 - Qiita
はじめに｜猫でもわかるHotwire入門 Turbo編
Glimmer DSL for Opal is Riding Rails 7
Using Opal Ruby with Rails 7
Hotwire を 本番環境で使ってみた感想
