ブラウザーにChromeのデベロッパーツールを埋め込めるReactコンポーネントを作ってみた

2024/04/10 18 users デベロッパーツール デバッグ Rea ブラウザー Chrome

とてもニッチな用途で使えるコンポーネントですがその場のiframeのデバックができるReactコンポーネントを作ってみました！ まずはこちらのポストをご覧ください！ このポストではChromeのデベロッパーツールを開いているわけではなく、ブラウザー内に直接デベロッパーツールが埋め込まれています！ 今回はこのようなRea... 続きを読む

Windows PowerShellで動くスクリプトがPowerShellでも動くとは限らない、なぜなのか？

2024/03/12 17 users PowerShell 山市良 スクリプト Microsoft

山市良のうぃんどうず日記 Windowsコンポーネントの「Windows PowerShell」とオープンソースの「PowerShell」 Windowsのコンポーネントである「Windows PowerShell」は「5.1」が現行バージョンであり、その後のロードマップは示されていません。 その代わり、Microsoftはオープンソースプロジェクトである「PowerShell」... 続きを読む

React Server Components を使うためのミニマムなフレームワーク Waku

2024/03/02 13 users ミニマム React Server Components

http://localhost:3000/ にアクセスすると、Waku のデフォルトのページが表示されます。 React Server Components 冒頭で述べたように、Waku は React Server Components に対応しています。React Server Components は React の新しいパラダイムであり、サーバー上でのみ実行されるコンポーネントを提供します。サーバ... 続きを読む

LCEL (LangChain Expression Language）完全に理解した - Amazon Bedrock APIで始めるLLM超入門⑨ - Qiita

2024/02/28 17 users Qiita Chain Bedrock LangChain

LCEL (LangChain Expression Language）完全に理解した - Amazon Bedrock APIで始めるLLM超入門⑨PythonAWSbedrocklangchainLCEL LCELからBedrockを呼び出してみます。 LCELとは LangChainでコンポーネントをchain（連続呼出）する共通のInterfaceおよびその記法です。 Interfaceは以下のページが分かり易かったですが、... 続きを読む

「OneNote」が「Loop」コンポーネントの追加に対応 ～リアルタイム同期するデータ部品／Windows版とWeb版「Microsoft OneNote」アプリに導入

2024/01/30 11 users OneNote loop リアルタイム Windows版 追加

続きを読む

【Playwright】ココがスゴいぜ！Playwright Component Test！ - RAKUS Developers Blog | ラクス エンジニアブログ

2024/01/23 15 users playwright ラクス koki_matsura 目次

こんにちは。フロントエンド開発課所属のkoki_matsuraです。 今回はPlaywrightのコンポーネントテストについて個人的な意見を書いています。 目次は以下の通りになっています。 はじめに 導入方法 Playwright Component Test Runner のスゴい点 コンポーネントが実際にレンダリングされる 画面のサイズを指定できる タイ... 続きを読む

useEffect: 基礎から使用すべきでない例まで

2024/01/04 215 users useEffect effect React レンダリング

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む

コンポーネントをアクセシブルに保つ技術

2023/12/21 11 users アクセシブル コンポーネントライブラリ Linter 実装

アクセシビリティ Advent Calendar 2023 21日目の記事です。 Ubie株式会社 デザインエンジニアのtakanoripです。 Ubieではデザインシステムの1要素としてコンポーネントライブラリの実装を進めています。その中でコンポーネントをアクセシブルに保つための仕組みをいくつか導入しているので紹介します。 Linter まず一番... 続きを読む

一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog

2023/12/14 11 users 変遷 フロントエンド設計 developers blog

宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポー... 続きを読む

Storybook 腐らせない

2023/12/09 33 users StorYBook 単体 アプリケーション ツール 現代

この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツール... 続きを読む

なんとLinuxにブルースクリーン・オブ・デスが新機能として追加される

2023/12/08 20 users Linux BSoD systemd 畏怖 新機能

Windowsを長年触っている人なら一度はブルースクリーンを目にしたことがあるはず。このブルースクリーンは海外では「ブルースクリーン・オブ・デス(BSoD)」と呼ばれ畏怖の対象となっているのですが、新たにLinuxのシステム管理ソフトウェア群「systemd」にブルースクリーンと同等の機能を備えたコンポーネント「systemd-... 続きを読む

React Server Components のテスト手法

2023/11/26 51 users React Server Components テスト

React Server Components のテスト手法 2023.11.26 現代におけるコンポーネントのテストは Testing Library を用いてテストを行うことが一般的です。しかし、2023 年　11 月現在、Testing Library はまだ Server Components のテストを十分にサポートしていません。そのため、Server Components のテストを行うには、別... 続きを読む

優先度B: 強く推奨 | Vue.js

2023/11/02 22 users Vue.js 推奨 少数 違反 ルール

優先度B: 強く推奨 ​これらのルールは、ほとんどのプロジェクトで可読性や開発者の使い勝手を向上させることが分かっています。これらのルールに違反した場合でも、あなたのコードは動作しますが、違反はごく少数で十分に正当な理由がなければいけません。 コンポーネントのファイル ​ファイルを結合してくれるビルドシ... 続きを読む

Popover API さわってみた

2023/07/05 16 users Popover API dialog トースター ユーザー

Chrome 114からPopover APIがサポートされました。 Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 基本的な使い方からdialogとの使い分けまで調べたのでまとめたいと思います。 基本的な使い... 続きを読む

UIのフォントサイズ、マージン、コンポーネントで黄金比や白銀比によるバリエーションを簡単に作成できるツール -Proportio

2023/06/13 154 users フォントサイズ マージン パディング 白銀比 バリエーション

UIデザイン用にフォントやアイコンのサイズ、スペース、角丸、シャドウ、パディング、コンポーネントなどで比例スケールを使用したバリエーションを簡単に作成できるオンラインツール（ローカルも可）を紹介します。 たとえば、黄金比でフォントサイズを設計したり、白銀比でコンポーネントを設計したり、ということがで... 続きを読む

ReactコンポーネントでレンダリングされるHTML要素の種類を変更可能にするためのパターン

2023/06/04 19 users Reactコンポーネント UIコンポーネントライブラリ

ReactのUIコンポーネントライブラリを使っていると、あるコンポーネントによってレンダリングされるHTML要素の種類を変更したくなる場面がある。たとえば、通常はbutton要素としてレンダリングされるButtonコンポーネントを使うときに、代わりにa要素を使ってレンダリングしたいというケース。 as prop そのような場合、... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users コンポーネントベース Twitter React CSS 反響

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

コンポーネントを配信するシステムについて構想する

2023/05/07 20 users システム

はじめに この記事は、Cloudflare が提唱する Fragment Piercing (フラグメント・ピアシング) の記事(Cloudflare Workersによるマイクロフロントエンドの段階的な採用)を読んだ筆者が、そこから得たアイデアとそれをPoC（概念実証）している「コンポーネント配信システム」についてドキュメント化したものである。 この... 続きを読む

モニター直撮り写真しか残っていない歴史的CGアート「Four-Byte Burger」を完全再現するまでの道のり

2023/05/05 12 users 道のり CGアート Amiga コモドール 宣伝

コモドールが1985年に発売したコンポーネント「Amiga」には、CGアートを制作＆表示できる環境が備わっていました。そんなAmigaの宣伝に用いられていたCGアート「Four-Byte Burger」を「説明書に含まれるモニター直撮り写真」を参考にして復元する様子がYouTubeチャンネル「Ahoy」によって投稿されています。 Four-Byte B... 続きを読む

Vercel はもっと薄く使える

2023/05/04 12 users Vercel Postgres blob Storage 関数

はじめに Vercel Ship、アツい発表が続いていますね。 特に初日の Storage は、KV、Postgres、Blob と 3 つのプロダクトが公開され、「とりあえず何か試したい！」「今の構成のあのコンポーネントは Vercel で済ませられるようになりそう！」となった方も多いんじゃないでしょうか。 Vercel で何かしら関数を動かすとな... 続きを読む

【ArgoCD🐙】ArgoCDのアーキテクチャと自動デプロイの仕組み - 好きな技術を布教したい 😗

2023/05/02 13 users ArgoCD アーキテクチャ 自動デプロイ レイヤー 概要

01. はじめに 02. 概要 アーキテクチャ ▼ レイヤー ▼ コンポーネント 仕組み 【１】 【２】 【３】 【４】 【５】 【６】 【７】 【８】 【９】 【１０】 03. repo-server repo-serverとは 仕組み 【１】 【２】 【３】 【４】 【５】 【６】 【７】 04. application-controller、redis-server application-controllerと... 続きを読む

GitHub、ソフトウェア部品表の作成機能を無償公開--脆弱性管理を容易に

2023/04/07 220 users GitHub リポジトリー ソフトウェア部品表 脆弱性管理

印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます ギットハブ・ジャパン（GitHub）は4月7日、クラウド上のリポジトリーからソフトウェアを構成するコンポーネントやライブラリーなどの状況を開発者が容易に把握、管理できる「ソ... 続きを読む

Kotlin/Wasmでサーバサイドアプリケーションを開発するフレームワーク「KoWasm」が登場。WebAssemblyのガベージコレクションやコンポーネントの活用を想定

2023/04/04 10 users ガベージコレクション コミッタ Kotlin wasm 想定

Kotlin/Wasmでサーバサイドアプリケーションを開発するフレームワーク「KoWasm」が登場。WebAssemblyのガベージコレクションやコンポーネントの活用を想定 JetBrainsでKotlinの開発を担当するZalim Bashorov氏と、VMwareでSpring Frameworkのコミッタとして働くSébastien Deleuze氏は、Kotlinで書かれたコードをWebAssem... 続きを読む

AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE

2023/04/04 144 users ナビゲーション CSS AIツール 生成 UI要素

AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション　アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI ... 続きを読む

バックエンドエンジニアのための「React の仕組み」の理解方法 - めもめも

2023/03/05 304 users React メンタルモデル コーディング エンジニア 異次元

何の話かと言うと 普段、UI に関わらないバックエンドのコンポーネントを作っているエンジニアがフロントエンドのコーディングを理解しようとすると、色々と異次元な世界で混乱する（というか何をやっているのかをすぐに忘れる）ので、バックエンドエンジニアにわかりやすい形で React の仕組み（メンタルモデル）をまと... 続きを読む