CSS in JS

はじめに こんにちは！hy094です。 今回はZero-Runtime CSS-in-JSである「macaron」(macaron-css)の使い方を調べてみたので、 それをまとめたいと思います。 ※本記事は大部分が公式のGitHubと公式ドキュメントの和訳で構成されています。 ※英語がとても苦手なので翻訳アプリを駆使して書いています。誤りがあったらこっそり教えていただけると嬉しいです。 はじめに macaron（macaron-css）って結局どうなの？ macaron（macaron-css）って何？ どんな特徴があるの？ どうやってインストールするの？ バンドラの設定は？ どうやって使う…

今関わっているプロジェクトで vanilla-extract という CSS Modules っぽく書ける CSS in JS が使われており初めて触ってみたの感想的なメモ vanilla-extract の特徴 *.css.ts という TypeScript ファイルにオブジェクト形式で CSS を作成して CSS Modude っぽく使える TypeScript なので型の恩恵が受けられる (存在しないプロパティなどがコンパイルエラーになる) CSS のネストが制限される CSS Modules っぽい *.css.ts ファイルに書いたクラス定義を import して className…

はじめに 社内のプロジェクトでCSSinJSライブラ入りとしてemotionを導入したのでコーディングルールを考えてみました。 プロジェクトで使用する技術 package version next v11.1.2 typescript v4.4.3 @emotion/react v11.4.1 css関数を使ってスタイルを定義する emotionではstyle-componentと同様にスタイルを含むコンポーネントを作成するstyled関数と、コンポーネントと独立してスタイルを定義できるcss関数が用意されています。 css関数を使うことで従来のマークアップのようにHTMLとCSSを分別するこ…

LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定するのにちょいハマったのでメモ。 Svelte プロジェクトの作成 $ npx degit sveltejs/template my-project $ cd my-project $ npm install # TypeScript 化 (設定勝手にやってくれる) $ node scripts/setupTypeScri…

こんにちは。エンジニアの佐藤(@t0m0h1r0x)です。 今回は、弊社で現在進めているEmotionからCSS Modulesへの移行について紹介します。 移行の背景、検討した代替ライブラリ、そして最終的な決定について話していきます。 移行の検討理由 代替ライブラリの検討 Panda CSS Pigment CSS CSS Modulesへの移行 今後の展望 まとめ 移行の検討理由 弊社では現在、CSS-in-JSライブラリとしてEmotionを使用しています。ピュアなCSS記法を好むメンバーが多いので、EmotionのTagged Template Literal記法がチーム文化との相性も…

Reactの上達へのきっかけを掴んだ8月の学習の振り返りをしたいと思います。 8月の学習時間 結果：96.25時間 半年合計：705.25時間 HCに入って半年、本当に自分の時間のすべてを使って勉強して半年で700時間を達成できました。 もともとの目標が600時間だったため（年間1200時間ペース） 半年で700時間（年間1400時間ペース）はかなり上出来だと思っています。 しかしながら、まだロードマップは半分も進んでいません。やはりHCのロードマップは難しく 最新の技術を学ぶことは並大抵のことではないと感じています。 どうしても自分のポートフォリオをモダンな技術を使ってフルスタックで作成した…

findy.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。 会の概要 会の様子 Storybook駆動開発でフロントエンドリアーキテクトに立ち向かう Storybook開発で普段使っている機能 フロントエンドリアーキテクチャで抱えていた課題 開発体制 Storybook駆動開発の効果 Storybook駆動開発を起動に乗せるアプローチ Pages Router × EmotionからApp Router × Vanilla-extractへの移行 App Routerとvanillaの導入に踏み切った背景 vanilla-extractの…

マルチプロダクト戦略を掲げてプロダクトを急速に増やし続けている SmartHR のフロントエンド領域について、2018年から SmartHR に参加しているフロントエンドエンジニアの nabeliwo と技術顧問の koba04 が、これまでの振り返りと今後の展望を話しました。 SmartHR のフロントエンドでどんな技術が使われてきてどんな課題と向き合ってきたのか、そして今現在取り組んでいる課題や SmartHR ではどんなフロントエンドエンジニアが求められるのかなど、幅広いテーマが出てきました。 この記事ではその模様をお届けします。 目次 フロントエンドの Rails からの脱却とフロント…

はじめに 株式会社GROWTH VERSE（以下GV）でフロントエンドエンジニアをしている杉浦です。業務ではVueを利用してAIMSTARの画面を開発しています。また、新規プロダクトをNextで開発しています。GVに入社する前は業務・個人開発等で主にReactを5年ほど書いていました。 この記事では、もともとReactを書いていた私が、Vueを書き始めた際に感じた、違和感や気づきをお伝えすることで、これからVueに挑戦しようとしているReact開発者の一助になれば幸いです！ *この記事では、Next.jsやNuxt.jsなどのSSRのフレームワークについて触れていません、Viteを使ったSPA…

react-beautiful-dnd というドラッグ&ドロップのためのライブラリを知ったので調べた github.com react-beautiful-dndは、Atlassian社によって開発されているドラッグ&ドロップのためのライブラリで、使いやすいAPIを提供している 特徴 使いやすい 直感的なAPI: DragDropContext, Droppable, Draggableという3つの主要コンポーネントを使用するだけで、基本的な機能を実装できる これらのコンポーネントは、実際のUIの構造に沿って自然にネストできる 宣言的な設計: Reactの宣言的なパラダイムに沿った設計になって…

2024/8/6 https://typescript-jpc.connpass.com/event/325001/ 大規模なコードベースの改修のために自作TypeScriptツールを作るメリット 鴻巣 和司さん 大規模コード改修 大規模な改修の課題 差分がたくさん出る 開発期間が長い レビューでの実装漏れ見落とし コンポーネントライブラリのリプレース 自作の置換ツールを作った ルールに沿った一括置換 参照されないコンポーネントの削除 Reactのコードで副作用が無いコードだからできた 一括でできるからいろいろなアプローチを試せた ts-morph使ってAST操作した ツールを作ってみて 汎用…

はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています。以前の記事ではCSS in JSの技術選定をした際の背景や課題について紹介しました。 techblog.zozo.com その後、「ZOZO Tech Meetup - Web フロントエンド」でおよそ1年後の状況を簡単に共有させて頂きました。 speakerdeck.com 今回はZOZO Tech Meetupでお話した内容に加えて、CSS in JS導入から2年後の現状を改めて紹介したいと思います。 C…

こんにちは。アスクル初のデザインエンジニアになることを目論んでいる現フロントエンドエンジニアの谷です。 本記事では、サイトのフロント刷新のために1からデザインシステムを構築したという取り組みについてご紹介します。

Reactアプリケーションを開発する際には、スタイリングをどのように管理するかが重要です。CSS Modules、Styled Componentsなど、さまざまなスタイリングオプションがあります。それぞれの特徴や利点を理解し、プロジェクトに適した選択を行いましょう。 moun45.hatenablog.com 1. CSS Modules CSS Modulesは、CSSをモジュール化してコンポーネントごとにスコープ化する方法です。各コンポーネントに対応する独自のCSSクラス名が生成され、名前の競合を防ぎます。また、標準のCSS構文を使用するため、既存のCSSコードを再利用しやすいという利点…

こんにちは！飲食店システム開発部オーダーチームの開発エンジニアを担当している堀口です。 食べログオーダーは、レストランでの飲食体験をより快適にするためのモバイルオーダーシステムです。飲食店に来店したお客様が自身のスマートフォンを使用してQRコードを読み取り、Web上でメニューをカートに追加し注文することができます。メニュー選択や注文操作はWebでありながら、ハーフモーダルを使用したネイティブアプリのような注文体験ができます。 この記事では、モバイルオーダーシステムのUI改善に焦点を当てます。ハーフモーダルの採用がどのようにして決定されたのか、その開発プロセス、そして実際に達成された改善点につい…

目次 目次 はじめに 企画LPの儚さ 企画LPをアーカイブする！ 仕様 開発について 技術選定 ちょっと技術の話 スクラム開発 ユーザーの反応 おわりに はじめに こんにちは！ ZOZOTOWN企画開発部・企画フロントエンド1ブロックの秋山です。ZOZOTOWNトップでは、セール訴求や新作アイテム訴求、未出店ブランドの期間限定ポップアップ、著名人コラボなどの企画イベントが毎日何かしら打ち出されています。私はそのプラットフォームとなる企画LPをメインに実装するチームに在籍しています。 チーム特性としては以下のようなものがあります！ クリエイティブコーディング寄りの実装をする機会に恵まれやすい 普…