ChakraUIについてまとめてみた（概要編） - Qiita
現在携わっているプロジェクトでは、UIライブラリとしてChakraUIを導入しています。 実装を進めるうちに便利だな〜と思う部分がたくさんあったので、今回はChakraUIの概要について共有したいと思います。 対象読者 ChakraUIの導入を検討している人・ChakraUIに興味がある人 そもそも ChakraUIとは？ “Chakra UI”は、UIコンポーネントライブラリの一つです。これを使用することで、1からCSSを記述することなくスタイルに一貫性を持たせたUIを楽に実装することができます。 Our goal is to design simple, composable components that cater to real-life UI design problems. In order to do that, we developed a set of principl
フロントエンド領域でチームをリードしたいエンジニア募集中！
フロントエンド領域でチームをリードしたいエンジニア募集中！ 株式会社カオナビ @kaonavi React TypeScript Web Standards / Browsers CSS JavaScript I want to hear a detailed 株式会社カオナビでは、場所と時間に縛られない、新たな働き方制度「MY WORK STYLE」を始めています。 働く場所の選択（出社 or 自宅 or 許可された就業スペース） スーパーフレックス制度 スイッチワーク制度 などなど、詳しくはこちらをご確認ください！ 「場所と時間に縛られない、新たな働き方制度 MY WORK STYLE を開始」 https://corp.kaonavi.jp/news/pr_20201201/ 【募集概要】 自社サービスのタレントマネジメントシステム「カオナビ」において、新機能開発や機能拡張の実装、パ
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応
Google ChromeのDevToolsがAngular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応 GoogleはすでにリリースしているWebブラウザのChrome 110と現在開発中のChrome 111に搭載されているDevToolsで、Angular、Vue、JSX、Dart、LESS、SCSS、SASSなどのシンタックスハイライトに対応したことが明らかになりました。 2月16日付けで公開されたブログ「What's New in DevTools (Chrome 111)」では、Chrome 111で、Angularのシンタックスハイライトに対応したことが「Better syntax highlight for Angular」の項目で紹介されています。 下記のサンプルでは、例えば2行目のダブルクオーテーション内の値などがAngul
Astro と CSS Modules を使用した React のコンポーネントの、開発と本番時における style の優先順の差異 | DevelopersIO
すこし前の話になるのですが、SSG している自分のブログをNext.jsからAstroに置き換えました。置き換えた経緯などはそちらで記事にしています。そのためここでは、Astro コンポーネントのスタイルについての詳細には言及していません。 今回発生した現象修正した PR としては以下になります。 AstroからReactのコンポーネントに対してスタイリングをしているCSSを修正 #946 経緯 自分のブログを時間があるときに少しずつ機能実装しているのですが、あるとき本番環境でスタイルが崩れていることに気づきました。 結構目立つスタイルの崩れだったので、なぜ開発中に気づかなかったのか疑問に思いながら開発環境を立ち上げると、現象の再現はしませんでした。 本番環境 開発環境 本番環境では次のようになっています。 index.6061e360.css ファイルが生成されていて、どちらも同じファイ
jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | 株式会社ヌーラボ(Nulab inc.)
Typetalk チームフロントエンドエンジニアの岡藤（@johnykei）です。先日 Typetalk Webサイトリニューアルに伴い、フロントエンドの技術を jQuery から React + styled-components に刷新しました。本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣れた jQuery を使っていました。 フロントエンドエンジニアという肩書きではありますが、フロントエンドエンジニアという職種は幅広く、僕はどちらかというとページやUIのスタイリングが主な業務で、普段 JavaScript を書く頻度もそんなに高くありませんでした。 最近海外ではそのような業種の人をフロントエンドデザイナーと呼ぶ動きも出てきていますが、jQuery しか使ってい
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC Engineers' Blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
