近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに
Deno入門 ─ 新しいTypeScript/JavaScript実行環境でWebアプリ開発とデータベース接続の基本を体験しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
例えばmain.tsというスクリプトに対して、ファイルの読み取りだけを許可したい場合は、以下のようにコマンドを実行します。 $ deno run --allow-read main.ts このときmain.tsプログラムはファイルの読み取りだけが可能になるため、ファイルの書き込みやネットワークアクセスをするとPermissionErrorによる実行時エラーになります。 なお、実行時にフラグを何も与えなければ、どの権限も持っていない状態になります。 各フラグにはパラメータを指定でき、例えば次のように実行すると/home/userディレクトリの読み込みだけが許可されます（--allow-writeフラグも同様）。 $ deno run --allow-read=/home/user main.ts また、--allow-netを次のように指定すると、特定のドメインとポートだけのアクセスを許可で
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
Webサイトやスマホアプリで見かけるUIコンポーネントをTailwind CSSで実装されたコンポーネント集を紹介します。 Tailwind CSSを初めて触れる人にも簡単で、デフォルト構成で機能し、HTMLをコピペするだけで簡単に使用できます。 Flowrift Flowrift -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Flowriftは、Tailwind CSSで実装されたUIコンポーネントのライブラリです。通常のHTMLに、Tailwind CSSのデフォルト構成で機能します。コンポーネントを組み合わせて、ページレイアウトを作成することもできます。 Flowrift ライセンスが明記されてい
ランディングページや小規模Webサイト用のHTMLテンプレートが無料で利用できるInovatikを紹介します。すべてのHTMLテンプレートはオープンソースで、商用プロジェクトでも無料で利用できます。 時間や予算が少ない時、モックアップが必要な時などに便利です。BootstrapやTailwind CSSが使用されているので、勉強用にもいいですね。 Free HTML templates for websites and landing pages -Inovatik Inovatikの特徴 HTMLテンプレートのダウンロード Inovatikの無料HTMLテンプレート Inovatikの特徴 Inovatikはフロントエンドデベロッパーが実装した、ランディングページや小規模Webサイト用のHTMLテンプレートを無料でダウンロードできます。 すべてのHTMLテンプレートはMITライセンスで、
これまでとは異なるCSSフレームワークが登場しました！ Tailwind CSSのようにユーティリティファーストで、すべての値がCSS変数（カスタムプロパティ）で記述されています。レスポンシブ対応で一貫性のあるUIコンポーネントを簡単に、素早く実装できます。 単独でも他のフレームワークとの併用も可能で、カラーのみグラデーションのみシャドウのみタイポグラフィのみメディアクエリのみといった使い方もできます。 Open Props Open Props -GitHub Open Propsとは Open Propの使い方 Open Propsのデモ Open Propsとは Open PropsはこれまでのCSSフレームワークとは一味も二味も異なる、CSS変数（カスタムプロパティ）ベースのCSSフレームワークです。巧妙に設計されたWebデザイントークンは、一貫性のあるUIコンポーネントを素早く実
待機状態のUIについて整理してみる(デザイン編)
Introduction 概要 待機状態 UI のデザインについての記事です。 待機状態 UI というのは、ローディングや情報の処理待ち時に用いられる UIのことです。ここで待機状態の UI と読んでいる理由は、各デザインシステムやガイドラインなどで言い方が違うため、今回はこのように言及させてください。 この記事では、既存のデザインガイドラインや既存のデザインシステムから待機状態の UI の概観、デザインにおいて考慮することをまとめます！ ベストプラクティスを提案するわけではなく、作成する際、配慮することを頭に入れて思考できる記事にします。 背景、課題感 WebFront-end における各 UI の実装を行おうと考えているが、実装する際、ビジネス側やデザイン側と実装する UI について話し合って作ることが多いです。 小さなプロジェクトだと、デザイナーがいない事も多く、Front-end
皆さんはGitHub Copilotを使っていますか？VSCodeやIDEに拡張を入れると、生成AIとペアプロのようなことができるという、アレです。 最近はこれがないと仕事ができない。なかった時代を思い出せないという人が増えています。プログラミングの生産性に明確に差が生まれます。僕もその口です。 ただ、GitHub Copilotを使いこなせていないという話も度々聞きます。Copilotが提案してくれるコードが微妙で役に立たないというような感じです。 その差はどこにあるのか？を知りたくて6/24に試しにCopilotを使った動画を撮ってみました。実践的なCopilot実演動画というのはすごく珍しいらしく、GitHub dockyardというコミュニティの竣工イベントに登壇してみないか？というお声がけをいただいたので、8/5にGitHub Copilotを使いこなせるとどうなるのかというライ
Tailwind考 - uhyo/blog
皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ
CSS Variablesを使ってWeb LP制作のエンジニア作業時間を0にした話 - Mirrativ Tech Blog
こんにちは。Webフロントエンジニアの駒木です。 Mirrativでは毎週の様に運営主催イベントやゲーム会社様とのコラボ企画イベント等が開催されます。 そのイベント情報をユーザーへお伝えするメディアとして、イベント毎にWebページ いわゆる LP ( Landing Page ) を制作・公開しています。 Mirrativで公開している多種多様なLP ですが毎週の様に新しいイベントが企画・開催されますので、LPをエンジニアが都度制作していてはとても追いつきません。 そこでミラティブではCSS Variablesを活用することで、イベントの魅力が伝わるWeb LPをエンジニアが作業することなく制作・運用できる体制を構築しています。 本記事ではここまでに至った過程も含めお伝えします！ 目指すはイベント運用の効率化と専門性の排除 遡ること半年ほど前、イベント企画チームの目標として『より多くのイベ
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました！ ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円（本体2,6
CSSのユーティリティクラスと「関心の分離」——いかにしてユーティリティファーストにたどり着いたか（翻訳） - yuhei blog
Tailwind CSS作者のAdam Wathan氏による「CSS Utility Classes and "Separation of Concerns"」の日本語訳です。翻訳に当たって原著者の許諾を得ています。 2021年10月29日に全文再翻訳しました。 この数年の間で、私のCSSの書き方は、非常に「セマンティック」なアプローチから「ファクショナルCSS」と呼ばれるものに変わりました。 この書き方でCSSを書くと、多くの開発者からかなりの反感を買うことがあります。そのため、私がいかにしてここまでたどり着いたかを説明することで、その過程で得た教訓や洞察について共有したいと思います。 第1段階 「セマンティック」なCSS よいCSSのためのベストプラクティスとして、耳にするであろうことのひとつは「関心の分離」です。 考え方としては、HTMLにはコンテンツについての知識のみを含めるべきで
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
Figmaを最強のデザインツールに変えるプラグインを厳選してまとめてみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回はブラウザ上でWebデザインやプロトタイプを作成できる「Figma」をパワーアップしてくれる、厳選された拡張機能をまとめてご紹介します。 デザインの構築を便利にしてくれるものから、Web開発の即戦力となるプラグインやツールの枠を超えたユーティリティを提供してくれるものまで、幅広くピックアップしていますのでぜひ参考にしてみてください！ ■Figmaのデザインをコードに変換できるプラグイン 【 Figma to Code 】 Figmaで作成したWebデザインを、そのまま実際の開発に利用できるソースコードに変換してくれるプラグインが「Figma to Code」です。 2020年11月時点では、汎用性の高い「Tailwind CSS」を利用したHTMLへの書き出しに対応しており、他にもFlutterやSwiftUIのソースコードが出力可能です。
API経由でメール送信をするためのサービスといえば、SendGrid, Amazon SES, Postmarkのような名前が出てくるかと思います。 そんな中、弊社(トラストハブ)でも利用しているResendというサービスがとても使いやすいので紹介します。また、記事後半でResendを日本で使うにあたり重要なアップデートがあったので、どんな点が変わったかを紹介します。 そもそもResendとはどんなサービスか Resendは後発サービスなだけあり、開発体験の良さに主眼が置かれて開発されています。テストでメールが送信できていることを確認する機能や、ログを確認する機能など、細かいところが使い勝手が良いなと感じています。 SDK・設定がシンプル 公式でたくさんの言語のSDKが用意されています。また、フレームワークごとに組み込むためのドキュメントも充実しています。 Knowledge Baseを見
とある大規模開発プロジェクトの中で WebView 用のフロントエンドシステム開発を立ち上げて2ヶ月経ちました。Android, iOS専任のエンジニアがいないため、外部協力者の指導のもと、モバイルアプリの画面を WebView で作るためです。 ある程度その営みについて見えてきたものがあるので記事にまとめることにしました。 プロジェクト参加人数は30名以上 プロジェクト自体は4ヶ月前から動いてる このプロジェクトへのフロントエンドチームの参加は1月から 現在 WebView とモバイル・バックエンドなどの結合試験をはじめている 背景 去年12月いまの会社にテックリードとして入社し、前述とは別のプロジェクトでフロントエンドチーム立ち上げを行っていました。同タイミングで、いまの会社に誘ってくれた飲み仲間もテックリード・チームリーダーとして入社しています。フロントエンドチームはこの2名がプロパ
はじめに React開発におけるNext.jsのプレゼンスが日に日に増している今日この頃ですが、Next.jsを使う必要がない小規模なSPAを作る場合の型が欲しくなり、色々調べて技術選定をした上で実際に作ってみるところまでやったので、その技術選定理由とセットアップ手順を共有したいと思います。 フロントエンドの移り変わりは速いとはいえ、割とホットな技術を選定できたと思うのでしばらくは使っていけそうです（そう思いたい…）。 前提 趣味で小規模なSPAを作る場合を想定 ルーティングなしの単機能アプリ SSRが必要ない モーダルなどの動きのあるUIが必要ない 技術スタック Vite Preact TypeScript Tailwind CSS Cloudflare Pages 技術選定理由 Vite 少し前まではこういうケースではcreate-react-appを使用していましたが、Viteに置き
「Tailwind CSS実践入門」出版記念イベントの基調講演で使用したスライドです。 イベント詳細 → https://pixiv.connpass.com/event/310073/ 書籍 → https://gihyo.jp/book/2024/978-4-297-13943-8
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発手法について興味がある方にオススメです。 1章 Next.jsのセットアップ 2章 Prismaのセットアップ 3章 GraphQL Code Generatorのセットアップ 4章 テストコードの追加 5章 本番環境へ
Auth.js v5ではじめる本格認証入門
Next.js 14 / Auth.js v5 / Prisma / Planet Scale / shadcn/ui / Tailwind CSS を用いた認証・認可をハンズオン形式で学びます。
Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preline UI -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Preline UIの特徴 Preline UIのUIコンポーネントとページレイアウト Preline UIの使い方 Preline UIの特徴 Preline UIは、ユーティリティファーストのTai
みなさん、デザインツールの Figma を使っていますか？ 私はまだ「使っている」と言えるほど使えていません というわけで勉強会を開催して勉強します Figma とは 公式の紹介文は以下のとおりです デザインの追求からプロトタイプ作成、制作物のコーディングまで、Figmaはチームがコラボレーションして製品開発するためのプラットフォームです 本記事のタイトルと同じように、「デザインからデモ・実装までチームで製品開発できる」旨が書かれています まさにその通りで、ブラウザ上で UI をデザインし、そのまま動かしてみることができ、最終的にはコードの生成までできてしまうツールです Figma の人気 2022年に世界中のデザイン関係者を対象としたアンケートでも Figma は圧倒的な人気です いずれのランキングでも2位の10倍以上の得票数になっています メインで使っている UI デザインツール第1位
朗報！ CSSの:has()疑似クラスがすべてのブラウザにサポートされました、:has()疑似クラスの便利な使い方のまとめ
CSSの:has()疑似クラスは便利そうだけどブラウザのサポートがまだ、と見送っていた人に朗報です。12/19にリリースされたFirefox 121（リリース情報）でサポートされ、これで:has()疑似クラスがすべてのブラウザにサポートされました。 そんな:has()疑似クラスの便利な使い方を紹介します。 :has()疑似クラスのサポート状況 ※まだFirefox 121の分がアップデートされていないようです。 Chrome, Edgeは105から、Safariは15.4からサポートされているので、来年は:has()疑似クラスを使用する機会も増えるでしょう。 また、12/20にアップデートされたTailwind CSS v3.4（リリース情報）でも:has()疑似クラスがサポートされました。 :has()疑似クラスの基礎知識 CSSの:has()疑似クラスとは、指定した要素がある場合にのみ
Todoアプリを作りながら、React, TypeScript, Tailwind CSSが学べる本です。
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】 - Qiita
【個人開発】最新のNext.js+NextAuth.js+prisma+microCMSでECサイト作ってみた【フルスタックアプリケーション】TypeScriptフロントエンド個人開発Next.jsprisma はじめに 皆さんこんにちは、mamiなのだ！ 今回はバックエンドは作らずにNextAuth.jsやprisma、microCMSなどを利用してNext.jsでECサイトを作成してみたので、その方法や手順などを公開しつつ、認証周りや大型開発案件でも採用されるstorybookなどについても解説していこうと思うのだ！ フロントを勉強し始めた初学者さんや、フロントがメインではないバックエンドエンジニアの方に向けて、丁寧に解説を挟みながら書いていくので「へ〜フロントってこんな感じのことやってるんだ〜」と思ってくれたら嬉しいのだ！ ちなみにこの記事は丁寧に解説しすぎて死ぬほど長くなってしまっ
CSS-in-JSのパラダイムシフト
2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパフォーマンス上の問題を抱えているとの指摘を受けているものもあり、最近は人気が下火になっているように感じています。 そこで本記事では、CSS-in-JSが生まれた背景から遡り、各ライブラリの内部実装を確認しながらそれぞれのライブラリの仕組み・メリット・問題点を明らかにし、CSS-in-JSのパラダイムシフトを追ってみたいと思います。 CSS-in-JSの登場 CSS-in-JSという言葉が最初に公の場で登場したのは、2014年にFacebookの
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl） - Qiita
モダンな技術で手軽に地図アプリを始めてみよう！！！（Next.js/TypeScript/Tailwind CSS/maplibre GL JS/Deck.gl）TypeScriptNext.jsdeckgltailwindcssMapLibre はじめに はい！！！今年もやってまいりましたMIERUNEアドベントカレンダー！！！ 記念すべき1日目は「何をするにもまずは環境構築からだよね！」ということで、モダンな技術をふんだんに使ってフロントエンド側の環境を構築し、簡単な地図アプリ用テンプレートを作成いきたいと思います！ 最新技術を利用すればめんどくさい環境構築も簡単に行えるようになるぞーっていうのを知ってもらえればなーと思います！ こちらに記載の手順を全部実行したテンプレートは以下のリポジトリで公開していますので、せっかちな方はこちらからどうぞ！ https://github.com/n
Webページでよく見かけるUIコンポーネント、ヘッダ・フッタ・ヒーロー・ギャラリー・ステップ・お問い合わせなどをTailwind CSSですぐに実装できるコードをまとめたtailblocksを紹介します。 それぞれのUIコンポーネントにはさまざまなバリエーションもあり、スマホ・タブレット・デスクトップでの表示、ライトモード・ダークモード、テーマカラーの変更など、非常に便利です。 tailblocks -GitHub tailblocksの特徴 tailblocksのデモ tailblocksの特徴 tailblocksは、Tailwind CSSですぐに実装できるUIコンポーネントをまとめたものです。Tailwind CSSはUIコンポーネントをカスタマイズするためのユーティリティとなるclassを提供するCSSです。 参考: Tailwind CSSの便利な使い方、レイアウトやUIコンポ
目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないころには、関心の分離という文脈から、FONT要素などの物理タグはよくないものとされ、 コンテンツ(HTML)とスタイル(CSS)をきっちりと分離することが奨励されはじめた。 そこでは、HTMLはあくまで文書であり、CSSのクラスセレクタという接点でコンテンツと見た目が隔離されることで、それらは別世界のものとして管理されていた。 また、大規模サービス開発においていかにCSSを管理するかという問題意識はまだ
gzip圧縮だとあまり圧縮できていなく、スライディングウィンドウが小さいせいかなと思ったのですが、実際に大きさがかなり違うみたいなので、それが原因としてありえそうです。 Gzip uses a fixed size, 32KB window, and Brotli can use any window size from 1KB to 16MB, in powers of 2 (minus 16 bytes). This means that the Brotli window can be up to 512 times larger window than the deflate window. Results of experimenting with Brotli for dynamic web content - The Cloudflare Blog AudioContextの
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
Tailwind CSS はすべてをユティリティクラスで書くという特性上、HTML にはクラスがたくさん書かれることになります。1 つの要素に対してクラスがたくさん並んでいると、視覚的にどのようなスタイルが適用されているのかを把握するのが難しくなります。条件によってクラス名を付け替える処理を行っていると更に複雑になります。 <button className={` ${variant === "primary" && "border border-blue-500 bg-blue-500 text-white"} ${ variant === "secondary" && "border border-gray-500 bg-gray-500 text-white" } ${variant === "default" && "border border-gray-500 bg-white
Tailwind CSS 社内勉強会【まとめ】 - RAKUS Developers Blog | ラクス エンジニアブログ
背景 スコープ Tailwind CSSとは？ コンポーネント指向とは？ Tailwind CSSのメリット class名を考える必要がない デザインシステムの最低保証 ドキュメント、チートシートの豊富さ Tailwind CSSのデメリット classに多くのコードを書く必要があり、可読性が落ちやすい CSSの理解度がある程度必要 デザインを100%再現したい場合に強味を生かしづらい 他ライブラリやフレームワークとの比較 Bootstrapとの比較 Material UI/Vuetify等のUIライブラリとの比較 インライン記述との比較 まとめ 所感 参考 背景 こんにちは。mtaaaです。 社内のフロントエンド勉強会でTailwind CSSについて発表を行ったまとめとして、ブログに残したいと思います。 スコープ Tailwind CSSとは？ なぜTailwind CSSに注目が集ま
Reactでウェブフォームを作る2021
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
この雑記を書く問題意識は、Tailwind CSSに対して向けられている世の人々の不満が、Tailwind CSSがコミットしていることから外れた、お門違いの期待の押しつけになっているのではないかと感じるところにある。 ライブラリやフレームワーク、道具にはそれが作られた目的があり、果たそうとするコミットメントがある。その圏内において果たされていないコミットメントに対する不満は、それ自体の存在意義にかかわる意味を持つが、しかし利用者が一方的に寄せた期待が果たされないことに対する不満はそうではない。 念押しするまでもないと思うが、これはTailwind CSSに対して不満を向けるべきではないという話ではまったくない。むしろ、その不満の下敷きとなっている Tailwind CSS への期待が Tailwind CSS 自体によってコミットされたものでないとしたら、不満を向けてもしょうがないのでは
Tailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開している・「Windstatic」
WindstaticはTailwind.cssとAlpine.jsで作られた161ものUIやレイアウトを無償公開しているWebサイトです。 UI、というかセクション単位でカテゴライズされていて、ヒーローイメージのブロック、特徴を紹介するブロック、フッター、CTAや値段表などに分けられ、それぞれにいくつかのレイアウトを用意、コードをコピーできるようになっている、という感じです。 スタイルは一貫したもので統一されているので自由に組み合わせても、見た目はある程度はチグハグにならず整えられたサイトが出来上がるかなと思います。 利用にあたりユーザー登録も不要で自由に利用できるみたいです。 Windstatic
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog
はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート
はじめに サービス URL GitHub リポジトリ 対象読者 自己紹介 アウトドア般若心経とは ポケモンGO の般若心経バージョン サービス開発のきっかけ サービスの概要 使い方 1. Google アカウントでログイン 2. 般若心経の全文を一覧で管理 3. 写経した写真を取り込む 4. 取り込んだ写真をトリミング 5. 写真の登録 6. 保存した内容の確認 7. メモの登録 8. 全体地図の確認 9. マイページ 技術スタック 技術選定の理由 アーキテクチャ ディレクトリ構成 開発方針とこだわり Getting Real UI / UX レスポンシブデザイン パフォーマンス ロゴ 機能面 コスト面 プロモーション オリジナルグッズ製作 アカウントを開設 ドッグフーディング 旅ログ 開発中に苦労したこと Google ログイン認証 外部ストレージサービスの設定 E2E テスト E2E
この記事は FastDOCTOR After Advent Calendar 27日の記事です。 はじめに ファストドクター株式会社でテックリードをしている shirauix と申します。 弊社では、ある Next.js アプリケーションを別会社のパートナーさんに外注することによって初期開発を行いました。ある時点からこのシステムを内製化することになったのですが、それにあたって多くの課題を解決する必要がありました。 この記事では、外注と内製のそれぞれのメリット・デメリットや、内製に切り替える際にどんな苦労があったのかについての赤裸々な事例をご紹介します。 対象となる読者 外注で初期開発したシステムを内製に切り替えてメンテナンスしようとしているエンジニアの方 新しくシステムを開発したいが、外注と内製のどちらを選択すべきか悩んでいる方 外注と内製の違い 外注するか内製するかはあくまで手段の話であ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSとコンポーネント設計に対する考察 - uhyo/blog
Tailwind CSSの入門に！コピペで簡単に利用できるUIコンポーネントのまとめ
商用でも完全無料、ランディングページ用のHTMLテンプレートがダウンロードできる -Inovatik
これまでとは異なるCSSフレームワークが登場！ 一貫性のあるUIコンポーネントを簡単に実装できる -Open Props
GitHub Copilotを使いこなしてプログラミングの生産性を上げる大切なコツ｜erukiti
Hono + htmx + Cloudflareは新しいスタック
『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
メール送信サービスのResendが日本でもまともに使えるようになったので紹介したい
大規模チームの中でフロントエンドを立ち上げて2ヶ月経ったのでまとめる
Next.jsを使う必要がない小規模なSPAの最小構成を考えてみた
『Tailwind CSS実践入門』 出版記念基調講演
Figma でデザイン、そのままデモ、そのまま実装！ - Qiita
【2024年】React, TypeScript, Tailwind CSSでTodoアプリを作ろう
Tailwind CSSですぐに実装できるUIコンポーネントのまとめ -tailblocks
Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史
Web Speed Hackathon 2021 miniでほぼ満点を出しました
Tailwind CSSを本気でカスタマイズする方法
Tailwind CSS を使う時に一緒に入れたいライブラリ
Tailwind CSSの二面性、デザインシステムを借りるということ | Marginalia
アウトドア般若心経が楽しめるWebアプリをリリースしました - Roll With IT
外注で初期開発したシステムを内製化するためにやったこと