mz-logo

豆蔵デベロッパーサイト

開発に役立つチュートリアルやテクニック・ノウハウを豆蔵メンバーがご紹介します!

記事のタグから検索 ...(全てのタグを表示)

本サイトは本家の豆蔵ホームページではありません。会社概要、製品紹介等はこちら、 募集中の求人情報はこちらをご覧ください。

mameka豆香の豆知識 image for mameka column
Tailwind CSS v3でモバイルUIをロケット加速☆
うおおおおぉ!豆香、今日はTailwind CSS v3でスマホUIをぶん回す話しちゃうぞっ!JITモードが標準化された瞬間、わたしの開発環境も脳内もフルブースト!書いたクラス名が保存した瞬間ビルドに反映、遅延ゼロ。まるで一瞬で焼ける電子レンジ餅…いや、焼きすぎて爆発しないよう注意だぞっ!
モバイルって通信量とスピード命じゃん?Tailwind v3のツリーシェイキングで未使用クラスがスパッと消えるから、最終CSSが激軽。3G回線でもサクッと表示されるから、地下アイドルのライブ配信並みにストレスフリー。これでユーザーの離脱率もキュイーンと減少!やったね!
さらにv3は任意値サポートで w-[72.5%] とか書けるから、細かいピクセル調整のために謎のカスタムクラス量産する必要ナッシング。わたしの脳内メモリも喜んで踊り子状態。クラス名が寿司ロールみたいに長くなる?それはそれで映え写真ならぬ映えコード!インスタに貼ったら誰もいいねしないけどね…笑
色のカスタムはtailwind.config.jsにtheme.extend書くだけ。ブランドカラーを1秒で全画面反映できるので、突然クライアントが「やっぱりピンクはマゼンタ寄りがいい☆」と言い出してもガチギレ回避。怒りの天元突破を防ぎつつ、ハッピー納品完了〜。
最後にPerformance Tips!モバイル向けなら
1. @applyで共通クラスまとめてHTMLスッキリ
2. dark:やmotion-safe: プレフィックスでUX思いやり注入
3. iPhone SEをエミュレートして限界テスト、豆香みたいに小柄でもがんばる姿勢!
Tailwind CSS v3、ほんと恋人以上に優秀。カフェイン切れした朝でもクラス打ち込むだけで元気チャージ☆ みんなも試して、指先タップの旅を最速で駆け抜けようぜ!
※本コラムはAIで生成したものです。内容の正確性を保証するものではありません。
過去のコラムはこちらから!

新着記事new-articles全ての記事を見る

  • | ブログ | 5 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(プロンプト編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、プロンプトについて説明します。 MCPのプロンプトは、MCPクライアント向けにテンプレート化されたメッセージやワークフローを提供する機能です。 生成指示やツールの利用順序を定義したワークフローなど、テンプレート化して再利用したい場合に有効です。 本記事で掲載しているコードはこちらで公開しています...

    記事を読む
  • | ブログ | 6 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(StreamableHTTPステートフル実装編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回は、StreamableHTTPで通信するMCPサーバーのステートフル実装について説明します。 ステートフル構成は、同じ利用者の連続操作を同一セッションとして扱いたい場合に有効です。 たとえば「ツールの呼び出し結果を次の呼び出しに引き継ぐ」「セッション単位で一時状態を保持する」「接続中の文脈を維持する」といった用途で使います...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(StreamableHTTPステートレス実装編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回はStreamableHTTPで通信するMCPサーバー(ステートレス)の実装について説明します。 前回のstdio実装編はMCPクライアントがサブプロセスとして実行しローカルで完結する構成でした。StreamableHTTPはHTTP経由でMCPサーバーを公開し、複数のMCPクライアントから利用可能な構成です...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(stdio実装編)

    はじめに # 本ページは「AIエージェントとシステムをつなぐMCP入門」の続編です。 今回はstdioで通信するMCPサーバーの実装について説明します。標準入出力(stdin/stdout)を利用したMCPサーバーの構築手順と、stdio特有の注意点について見ていきます。 本ページで掲載しているコードはこちらで公開しています...

    記事を読む
  • | ブログ | 5 min read
    #2026年 #Marp #生成AI #AI

    AIとMarpで実現するエンジニアらしいプレゼン作成術

    はじめに # アジャイルグループの石田です。 先日、3月24日に開催された豆寄席「スクラムマスターのAI活用を考える 〜透明性・検査・適応 三本柱を強化する実践アプローチ〜」に登壇しました。第50回という節目のイベントに想定以上の多くの方にご参加いただき、誠にありがとうございました。改めて、スクラムマスターとAIという組み合わせの注目度の高さを感じました...

    記事を読む
  • | ブログ | 5 min read
    #2026年 #MCP #typescript

    AIエージェントとシステムをつなぐMCP入門(イントロダクション)

    はじめに # 本シリーズでは、MCP(Model Context Protocol)の基本から実装まで段階を分けて解説します。 「AIエージェントに社内システムや外部APIの知識を与えたい」という方へ向けた内容になります。 今回はMCPそのものについて説明します。 今後、トランスポート(stdio, Streamable HTTP)ごとの実装、MCPの自動生成などへの展開を予定しています...

    記事を読む
  • | ブログ | 8 min read
    #2026年 #AWS #AWS認定

    AWS Generative AI Developer 合格とW全冠達成記

    はじめに # 前回の記事では、Google Cloud認定の鬼門であった「Professional Security Operations Engineer(PSOE)」を突破し、念願の「Google Cloud認定全冠」を達成したことをご報告しました...

    記事を読む
  • | ブログ | 8 min read
    #2026年 #Google Cloud #Google Cloud認定

    【リベンジ達成】Google Cloud認定をついに全冠制覇!鬼門のPSOE突破と再受験のリアル

    はじめに # これまで豆蔵デベロッパーサイトでAWS認定に関する記事を執筆し、直近の2026年3月26日には「Google Cloud認定全制覇!……まであと一歩で跳ね返されたリアルな軌跡」という記事を公開しました。 前回の記事では、約2か月の怒涛の受験ラッシュで全冠を目指したものの、最後の1つ「Professional Security Operations Engineer(PSOE)」で不合格となり、無敗記録がストップしてしまった経緯をお伝えしました...

    記事を読む
  • | ブログ | 7 min read
    #2026年 #Network #raspberry-pi #tips

    親心VSこども Wi-Fi大作戦!Raspberry Pi&Pi-holeで徹底ペアレンタルコントロールしてみた

    はじめに # こんにちは。私の参加しているプロジェクトでは、毎朝の朝会で各自のコンディション(ニコニコ、ちょいニコ、普通、ちょいしんど、しんどめ、地獄など)を共有する「ニコニコカレンダー」を活用しています。 先日、私がその日の気分を「ちょいしんど」、理由に「寝不足」と入力していたことから、メンバーに「副鼻腔炎が悪化しましたか?」と心配されました...

    記事を読む
  • | ブログ | 3 min read
    #2026年 #retrospective

    豆蔵デベロッパーサイト 2026年1-3月のサマリー

    新年度が始まりました。2026年1-3月のサマリーです。 記事数・執筆者数 # この3ヶ月で34本の記事が投稿され、記事数は876になりました。新たに2名が執筆デビューし、累計76名になりました。 連載 # SysML モデリング連載 # 複雑なシステムをモデリングするための新しい言語である SysML v2。この SysML v2モデルを作成・編集するためのグラフィカル・モデリングツール、SysON を紹介するシリーズ...

    記事を読む

豆蔵では共に高め合う仲間を募集しています!

recruit

具体的な採用情報はこちらからご覧いただけます。