react-to-web-component を使って React コンポーネントを Web Components に変換する

2024/10/20 24 users ライブラリ React コンポーネント HTML 要素

react-to-web-component を使って React コンポーネントを Web Components に変換する 2024.10.20 @r2wc/react-to-web-component は React コンポーネントを Web Components に変換するためのライブラリです。このライブラリを使用することで、React コンポーネントを任意の HTML 要素として使用することが可能になります。 続きを読む

Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど

2023/10/24 122 users WebAssembly Photoshop スレッド 用途

Webアプリ版Photoshopを実現させた最新Web技術をGoogleが紹介。WebAssemblyのスレッドによる高速化、ストリーミングコンパイル、Web Componentsなど Photoshopは画像の作成や加工といった専門的な用途を目的に、長年にわたって作り込まれた代表的なデスクトップソフトウェアの1つと言えます。 プロフェッショナルな用途... 続きを読む

Qwikの紹介 – HTMLファーストのフレームワーク | POSTD

2022/11/24 97 users POSTD Qwik ビジュアルエディタ angular 開発

Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 ... 続きを読む

SvelteでWeb Componentsを作成し、CDNから配布して使う

2022/01/20 11 users CDN Svelte スクリプト サードパーティー ブラウザ

モチベーション SvelteでWeb Componentsを作りたい 作ったWeb ComponentsをCDNで配布して、ブラウザから読み込んで使えるようにしたい サードパーティーのスクリプトを作るのにSvelteが適している理由は以下の記事にわかりやすくまとめられています。 SvelteでWeb Componentsをつくる CounterコンポーネントとClockコン... 続きを読む

JavaScript 今ドキな書き方 ES2020 - Speaker Deck

2020/11/14 435 users Speaker Deck Twitter Gma ＣＴＯ 赤貝

Transcript YouTube Live (2020.10.29 Thur. 21:00~) 話す人 現役のエンジニア二人 赤貝が好きな CTO と デザイン勉強中のエンジニア @mu_vpoe 最近の仕事は figma で画 面設計をつくることで す。英語の勉強してる。 ムー zaru @zaru CTO, Love 赤貝, JavaScript, Firebase, Web Components. Twitter フォロー お願いし... 続きを読む

react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog

2020/10/03 15 users styled-components React uhyo

CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する 筆者がたどり着いた考えは、... 続きを読む

Google Developers Japan: React と Web Components で Google Pay の統合が簡単になりました

2020/07/08 5 users React 統合 Google Pay

.app 1 .dev 1 #11WeeksOfAndroid 1 #Android11 1 #DevFest16 1 #DevFest17 1 #DevFest18 1 #DevFest19 1 #hack4jp 3 A/B Testing 1 A4A 4 Accelerator 1 Actions on Google 16 Activation Atlas 1 Addy Osmani 1 ADK 2 AdMob 31 Ads 59 Ads API 52 Advanced Protection Program 2 AdWords API 11 Agency 1 AI 11 AIY 3 ... 続きを読む

The Firefox UI is now built with Web Components - Brian Grinstead

2019/11/20 13 users Components

A couple of weeks ago, we landed a commit that took years of effort at Mozilla. It removed “XBL”, which means we’ve completed the process of migrating the Firefox UI to Web Components. It wasn’t easy - but I’ll get to that later. The Firefox UI can be thought of as a very large single page app. I... 続きを読む

Lightning-fast templates & Web Components: lit-html & LitElement  |  Web  |  Google Developers

2019/02/06 12 users lit-html Google Developers

Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now. Today we're excited to announce the first stable releases of our two next-generation web development libraries: lit-html and LitElement. lit-html is a tiny, f... 続きを読む

Lightning Web Components の現実と標準仕様への準拠について - Qiita

2019/02/05 9 users Qiita コンポーネン 準拠 標準仕様 現実

Web Components と Lightning Web Components 「Web Components」というWeb標準仕様があります。具体的には "Custom Elements" と "Shadow DOM" および "HTML Template" という個別の仕様群となりますが、この仕様に対応したブラウザプラットフォーム上であれば、開発者はこの仕様に則ることで再利用可能なコンポーネン... 続きを読む

2018-11-27のJS: Web Components入門、React-Reduxの歴史と実装、 HTTP/3 explained - JSer.info

2018/11/27 17 users Explained react-redux http 実装

JSer.info #411 - "Lets Build Web Components!"というWeb Componentsについての連載記事が公開されています。 Lets Build Web Components! Part 1: The Standards - DEV Community ‍‍ Lets Build Web Components! Part 2: The Polyfills - DEV Community ‍‍ Lets Build Web Components! Part 3: Vanilla Components - D... 続きを読む

Web Components のリアル/ Realistic Web Components - Speaker Deck

2018/11/25 73 users Speaker Deck

All slide content and descriptions are owned by their creators. 続きを読む

関数だけで Web Components を表現する FP ビューライブラリ Ullr を書いた

2018/06/14 16 users プログラミングスタイル 関数 コンポーネント バニラ 制約

Ullr というライブラリを書きました。 最近は個人的に、Web Components を書く機会が多いです。 バニラの Web Componentsは HTMLElement を継承していくのでオブジェクト指向なプログラミングスタイルをとることになります。 ただ、純粋な Web Components だと、コンポーネントの受け取れる値がすべて文字列になるという制約と、テンプレート中に書いた We... 続きを読む

ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | ヌーラボ

2018/03/14 170 users 近未来 ヌーラボ ライブラリ Cacoo フロントエンド開発

Cacoo チームエンジニアの川端です。普段は Cacoo のエディター(編集画面)のフロントエンドの開発をしております。最近パパになったので 娘の写真を親に共有するアプリを作ってみました 。その際に、Web Componentsなる機能を使ってみました。JSフレームワーク群雄割拠の昨今、ライブラリを使わずWeb Componentsだけでどこまでできるのかご紹介したいと思います。 Web Com... 続きを読む

JSフレームワークの末端がWebComponentsになるのか、なれるのか、検証してみた - Qiita

2018/02/13 97 users Qiita mizchi React 末端 フレームワーク

https://speakerdeck.com/mizchi/real-world-es201x-and-future で、「Reactやその他のフレームワークの末端はWebComponentsになるのではないか？」という話をした。とはいえ、実際に自分でそういうものを実装したわけではなかった。 じゃあ実際に、Reactから web components を呼ぶにはどうなるだろうか？実装してみた。 ... 続きを読む

“Web Componentsだけ” で新サービスを実装して見えたこと - Qiita

2018/02/13 398 users CloudFront Qiita DynamoDB 関数

Double O というサービスを作りました。 フロントエンドはピュアな Web Components を採用していて、バックエンドは Lambda と DynamoDB のみで構成しました。 (厳密には CloudFront とか API Gateway とかもあるけどそこは省いていいよね？) REST API 以外の Util 系の Lambda 関数はすべて AWS Cloud9 で管理する... 続きを読む

Web Componentsについて気になること、泉水さんに全部聞いてきました！ | HTML5Experts.jp

2017/09/21 107 users HTML5Experts.jp

こんにちは、編集長の白石です。 この記事は、9月24日に開催される HTML5 Conference 2017 に登壇するエキスパートに、予定しているセッションのトピックを中心に、様々な技術的なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの... 続きを読む

「Web Componentsが来る！CSS設計はどうなる？」―CSSのエキスパートに聞いてみた！ | HTML5Experts.jp

2017/04/17 149 users CSS エキスパート CSS設計 ＣＴＯ 榊原昌彦

榊原昌彦 一般社団法人リレーションデザイン研究所 代表理事、一般社団法人エリア・イノベーション・アライアンス CTO こんにちは、編集長の白石です。 Safari 10.1からCustom Elementsが使える ようになったり、 Microsoft EdgeもWeb Componentsの実装を約束していたり と、Web Componentsの足音は刻一刻と迫ってきています。 そんな時代に、W... 続きを読む

2017年のWeb Components：新春特別企画｜gihyo.jp … 技術評論社

2017/01/02 51 users gihyo.jp 新春特別企画 技術評論社 ウェブブラウザ

Web Componentsの構成要素すべてをウェブブラウザがネイティブサポートしているのは， ChromeとOperaのみです。その他のウェブブラウザは， 部分的なサポートにとどまっています。 Web Componentsを試したい時は， 実際には上記の表で掲載されたすべてのウェブブラウザで既に試すことができます。数多くの×マークがついているウェブブラウザについても， その穴を埋めてくれる機構 ... 続きを読む

進化するWeb Componentsの今、2016年最新情報 | HTML5Experts.jp

2016/11/22 58 users HTML5Experts.jp フィードバック 実装 議論

連載： 基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜 (7) Web Componentsが変えるWeb開発の未来 から、はや二年が経ちました。コミュニティでの議論やフィードバックを経て2016年現在、Web Componentsの仕様は大きくアップデートされています。先日行われた DevFest Tokyo 2016 でも Web Components 2... 続きを読む

Web Components と Electron でつくる Neovim フロントエンドの未来 - sorry, uninuplemented:

2015/12/19 199 users Electron Sorry mar Neovim vim

2015 - 12 - 20 Web Components と Electron でつくる Neovim フロントエンドの未来 Neovim Vim Electron Web Component この記事は Vim Advent Calendar 2015 の20日目の記事です． まずはこちらの スクリーンショット をご覧ください． エディタの UI やカーソル移動は Vim っぽいですが，mar... 続きを読む

Web Componentsの現状 | インフラ・ミドルウェア | POSTD

2015/08/11 108 users POSTD 展望 Web Component 議論 講演

2011年に発表されたWen Componentsは、コミュニティに衝撃を与え、発表以来、講演や議論のテーマとして多く取り上げられています。ところが実際は、Web Componentsはコミュニティに十分に受け入られていません。その現状と問題点、今後の展望について見ていきましょう。Alex RussellがFronteers Conference 2011で初めて発表したWeb Component... 続きを読む

Google I/O で v1.0 が発表された Polymer の Elements Catalog が面白い ::ハブろぐ

2015/06/01 78 users Polymer ラッパーライブラリ Site コンポーネント

Polymer Elements のカタログページ Site: Polymer Element Catalog Repo: Polymer/polymer-element-catalog Polymer は、これからの Web 標準の一角を占めるであろう Web Components のラッパーライブラリです。その Polymer で作られたコンポーネントのカタログサイトが公開されていました。 こ... 続きを読む

ブラウザで楽しめるドラム＆ベース＆ポケット・ミクのシーケンサー作った JavaScript/Web MIDI API: point of view point

2015/05/08 26 users シーケンサー Polymer API ミク ウェブブラウザ

JavaScript、Web MIDI API、Web Components/Polymerなどを使ってウェブブラウザで動くシーケンサーを作成、公開しました。 ドラムとベースに合わせて、eVocaloid初音ミク（ポケット・ミク）が歌います。ベースの音色変化にも対応しているので、アシッドっぽいこともできたりします。 Web MIDI API Rhythm & Bass Machine / ブラウザ... 続きを読む

Web ComponentsのこれからーPolymer 0.8、X-Tag、Brick、Bosonic | HTML5Experts.jp

2015/05/07 29 users 仕様 連載 徹底解説 基礎 実装

連載： 基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜 (5)この記事は、連載「基礎からわかるWeb Components徹底解説～仕様から実装まで理解する〜」の第5回目になります。... 続きを読む