ZOZOTOWN Webフロントエンドリプレイスにおける CSS in JS の技術選定で Emotion を選定した話 - ZOZO TECH BLOG
はじめに こんにちは。ZOZOTOWN開発本部フロントエンドの菊地（@hiro0218）です。 現在、ZOZOTOWNではWebフロントエンド技術のリプレイスプロジェクトが進行しています1。本記事では、WebフロントエンドのリプレイスでCSS in JSの技術選定をした際の背景や課題についてご紹介します。 既存技術スタックの課題 リプレイス以前の環境は、Classic ASPのテンプレートエンジンに依存したUI実装が多く存在しており、新規開発や変更のタイミングで実装をReact + CSS Modulesへ改修しています。そのため、レガシーな実装とモダンな実装が共存した状態です。 こういった背景から、リプレイス以前のUI開発では以下のような課題がありました。 グローバルなCSSが多く、CSSの変更がどこへ影響するのか予測しづらい Classic ASPのテンプレートエンジンに依存したUI実
Ubie Design Tokensを公開しました
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 Ubieではデザインのクオリティと生産性向上のためデザイン生産基盤の整備に力を入れています。 今回その一環として開発したデザイントークンをnpmパッケージとして公開しました。（現在はColorのみ。） 開発経緯 Ubie Design Tokens開発以前からデザイントークンのようなものは存在しており、CSS Variablesとして実装されていました。しかしユースケースを想定せず作った変数があったり定義が細かすぎたりしたことで「どの変数をどういう場面で使用すれは良いかわからない」という問題が発生していました。 そこで変数の定義を見直し、より実際のデザインに即したデザイントークンを策定するとともに、プロダクトごとの実装差異をなくすためのライブラリの開発に着手しました。 Colorの定義 Ubie Desi
150万MAUのNuxt.js製サービスを機能開発を止めずに1ヶ月&1人でNext.jsに置き換えた話
Nuxt.js で開発されていたAI受診相談ユビーのフロントエンドを Next.js で作り直しました。 まだまだ仮説検証を繰り返すフェーズのスタートアップのため、機能開発を止めて一気に置き換えることはできず、機能ごとに少しずつ置き換えてリリースをしました。結果、5人のプロダクト開発チームによる機能開発と並走して、全体の移行を1人で1ヶ月の短期間で終わらせることができたので、その意思決定や過程、工夫を紹介します。 移行前の課題 まず前提として、移行前の Nuxt.js による実装は 2018 年に立ち上がったもので、当時 toC の Web サービスを持っていなかった Ubie が ほぼ 1 人の小さいチームで PoC 的に作り始めたものでした。また、当時の Next.js は今ほど多機能ではないプレーンなフレームワークでした。 これらを踏まえて、当時の状況で MVP を最速で作るための技
Headless Component開発をはじめよう (Headless UI + React Spectrum)
はじめに この記事ではライブラリを活用したHeadlessなReact Component開発について紹介します。 Not Headless Component Headless Component の紹介の前にHeadless ComponentではないComponentとはなんでしょうか。 ReactでComponent を作成する際に Material-UIやAnt Designを使ったことがある人も多いのでは多いのではないでしょうか。 これらのライブラリは<Button />や<Menu />といったスタイル付属のReactコンポーネント集になっています。 自前でスタイルを書かずに使えるので便利ではあるのですが以下のような欠点があります。 細かい見た目の調整が難しい。 ライブラリにもよるのですが、細かい調整が難しいものが多いです。 例えばAnt DesignのButtonコンポーネ
DocBaseのフロントエンド改修をどのように進めたか
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロントエンド構成を Backbone.js+Coffeescript から React.js+TypeScript へ移行しました。大改修です。 どれくらい大きな変更だったかというと、10万行(2500ファイル)もの変更が行われ、それまでRubyだったはずのリポジトリ代表言語がTypeScriptに替わってしまったほどでした。 なお、2021/3/31のリリースでリニューアルすべてが終了したわけではありません。今後、機能拡張やUI改善をしやすくするための足がかりという位置づけです。 安全にリリースするためテスト期間を多めに取ったこともあり、期間としては1年ほどかかってしまいました。 今回はどのようにリニュ
PostCSS まとめ - Qiita
僕はPostCSSは開発当初から追いかけていて、GitHubでPostCSSチームのメンバーのひとりだったり、実際にPostCSSを使ってプラグインやツールをいくつか作ったり、ブログや雑誌で記事を書いたり、勉強会等で話したりしています。 本記事では、自分が知っているPostCSSについての事柄を共有します。 PostCSSとは何か PostCSSとは、ロシア人の Andrey Sitnik という人が開発している、Node.js製の「CSSツールを作るためのフレームワーク」です。PostCSS製のツールとして、ベンダープリフィックスを自動で付与する「Autoprefixer」、未来のCSSの構文の一部を今のブラウザで解釈できるようにする「cssnext」、カスタマイズ性に富んでいるCSSリンターである「stylelint」などが有名です。 PostCSSは2018年2月、かなり広く使われて
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
新規事業開発での技術選定の意思と意図 (フロントエンド編) - Sansan Tech Blog
こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意図があるかを確認していきます。 Bill Oneは今年の1月ごろにピボットし、それまで開発してきたフロントエンドを全て捨て、1から作り直しました。ピボットの際に改めて技術選定を行い、それまで使っていたライブラリ等を見直したので、本稿ではピボット前後で変化した箇所を中心にフロントエンドの技術選定を紹介します。 前提 改めて前提です。私たちのチームで開発しているBill Oneは今年の5月にローンチしたばかりのサービスで、チームのエンジニアは5名です。開発しているアプリケーションはSingle Page Application (SPA) で、エンジ
9年モノの Rails アプリで、古い Bootstrap を剥がして FLOCSS 化した話 - 弥生開発者ブログ
こんにちは、弥生 Misoca チームでマークアップをする方のデザイナー @kanizmb です。 今回、約1年をかけて古の Bootstrap の撤去および CSS 設計手法の導入（FLOCSS 化）をやり遂げたので、これらの変更をどのように進めていったかについてお話しします。 どういった状況だったか Misoca ローンチは 2011年、当時最新であった Bootstrap 2.3.2 を用いて構築が始まりました。(*1) 当初は請求書の郵送に特化した非常にシンプルなサービスだったため、少しの上書きでスムーズに開発が進められ、Bootstrap のメリットを存分に生かせていたのだと思います。 しかし時は流れ、取引先管理、品目管理、外部サービスとの連携など、機能が増え続けるとどんどん綻びが出始めます。 設計方針もないままに野放図に差し込まれた CSS たちは、いつしか激しい詳細度バトルを
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
松本の地でSass/SCSSの邪悪なアンパサンドを撲滅するために立ち上がった - メドピア開発者ブログ
メドピアCTO室フロントエンドエンジニアの小宮山です、よろしくおねがいします。 趣味はボルダリングとヨガとピラティスです、よろしくおねがいします。 ６月某日、長野県松本市の地にて開催されたメドピア開発合宿で取り組んだことについて紹介していきたいと思います。 アンパサンドへのウラミツラミ タイトルにも挙げたとおり、今回立ち向かったのはSass/SCSSのアンパサンド（&）です。 メドピアのリポジトリはほぼSCSSで統一されているので、この記事ではSCSSの記法ベースでコード例を載せていきます。 アンパサンド記法は、BEMライクなセレクタを書くときによく利用されるのではと思います。 例えばこのようなものです。 .header { &__foo { color: green; } &--bar { color: blue; } } アンパサンドを使い、冗長な記述を限りなく減らしたスマートな書き方
Webフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend #3」開催レポート | CyberAgent Developers Blog
今回は2019年5月18日（土）に開催された「Inside Frontend #3」のレポートをお届けします！ Inside Frontend とは Inside FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、ヤフーとサイバーエージェントが共同で開催するカンファレンスです。 2017年に第1回、2018年に第2回が開催され、どちらも大盛況のうちに幕を閉じました。 第3回の今回は有料イベント化という初めての試みにも関わらずありがたいことに多くの方々に関心を持っていただき、満員御礼での開催となりました。 本イベントは2つのセッション形式で開催されました。 各社のケーススタディや様々な分野のスペシャリストによるセミナーと、セミナーの後でスピーカーと自由に質問や議論ができるAMA（Ask Me Anything）セッションです。参加者の方々は現場で得られたノウハウやこ
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
Twitterでお菓子と一緒にメッセージを送れるサービスを二週間で開発、リリースした【個人開発】 - Qiita
こんにちは、Qiitaに初めて投稿するG4RDSと申します。 一年半前からWebを触り始めて、最近はVue.js/Nuxt.jsを使ってFirebaseをバックにWebサービスを作るのを趣味にしています。 今年度が大学一年生です。 今回、メッセージをお菓子のイラストと一緒にTwitterのリプライやDMで贈れる「chocotto」というサービスをリリースしました。 これが僕が作ったWebサービス二作目です。 サービス開始しました！ chocottoは無料で使えるギフトメッセージサービスです💌 メッセージをチョコなどのお菓子のイラストと一緒に贈れます🍪 もうすぐバレンタイン🍫 遠くてチョコを渡せない人にも、chocottoで想いを届けてみませんか？#chocottohttps://t.co/J3ONNEpKwu — chocotto (@chocotto_co) 2019年2月11日
Bootstrap の開発メンバーになった話 - Qiita
先日、Bootstrap の作者 (@mdo) からチームに加わらないかとお誘いのメールがあり、喜んで受け入れて、Bootstrap のチームメンバーになりました。 ↑ Organizations の所に Bootstrap のアイコンが表示されるようになりました。 どういう経緯でチームメンバーになったのかを書いてみたいと思います。 はじめての Issue 報告 私が初めて Bootstrap に Issue を報告したのは、今から 2 年と少し前の 2017 年 1 月のことでした。 Issue の内容は、「同じ Nav コンポーネントでも、タブスタイルとピルスタイルでマウスオーバーした時のマウスカーソルの形状が異なるが、その理由を知りたい」というものです。 mouse cursor on active item of tabs and pills #21560 「これはバグだ！」と言わ
59分割ヤバイ｜深津 貴之 (fladdict)
こばかなさんと、グリッド分割の話をしてるときに出たネタなのだけど。 グリッドの59分割ヤバイよねぇというお話。 画面を59分割すると、様々な比率で端数がでない。汎用的なグリッド分割できて素敵。個人的にはnoteで図表を描く時は、 ・幅620px ・天地左右マージン15px ・グリッド59分割 10pxを意識すると、色々と便利だと思う。 これ全部、ピクセルパーフェクトに分割できる。 1分割 = 590px grid 2分割 = 290px grid 3分割 = 190px grid 4分割 = 140px grid 5分割 = 110px grid 6分割 = 90px grid 8分割 = 65px grid （厳密には10の倍数でないので△） 10分割 = 50px grid 12分割 = 40px grid 15分割 = 30px grid 20分割 = 20px grid 24分割
Hummingbird: FlutterでWebアプリを作る構想 - ntaoo blog
本日のFlutter Liveのキーノートでは、Flutter 1.0 GA化を始め、たくさんのエキサイティングな発表がされたが、その中でも一番の驚きは、このキーノートの最後の、FlutterでWebアプリを開発可能にするという、Hummingbirdの発表だろう。 Hummingbird GAの次の構想として、AndroidとiOSに加えて、Windows, macOS, ChromeOS, ラズベリーパイなどのネイティブ環境での統一したUIツールキットとなる構想が発表されたことは予想の範囲内だが、Webアプリに関してはWebブラウザーという独特の環境で制約が強いため、Webアプリまでを対象にする構想がこの日に明らかにされたことは全く予想外だった。 これによりFlutterは、モバイルアプリ用途を超えた、モバイルOSでもデスクトップOSでもWebブラウザーでもシングルコードベースで動作す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deno 用のフロントエンド開発ツール packup について
