アイランドアーキテクチャ(Islands Architecture)とは何なのか - Qiita
はじめに アイランドアーキテクチャは2019年にEtsyのフロントエンドアーキテクトであるKatie Sylor-Miller氏によって考案され、Preact作者のJason Miller氏のBlogによって広められました。 現在、アイランドアーキテクチャはAstro、Fresh などのWebフレームワークが採用しています。 アイランドアーキテクチャとは ページ内でサーバー側でレンダリングされる静的な部分とインタラクティブなアプリの部分をそれぞれ独立して表示させる手法です。 静的な部分を海に見立てて、その海に浮かぶそれぞれが独立した島(インタラクティブなアプリ)というイメージでアイランドアーキテクチャと名付けられているようです。 メリット １番のメリットはパフォーマンスです。 ページのほとんどの部分は静的なHTMLで構成され、JavaScriptが必要としない部分にはJavaScriptが
最近気に入っているOSSを淡々と紹介する
はじめに こんにちは〜！皆様いかがお過ごしでしょうか？ no plan inc. CTOの @serinuntius です。 これはno plan inc.の Advent Calendar 2023の22日目の記事です。 最近気に入っているOSSとかを作者様に感謝しながら、スターを送りながら、こんなのを使用してるぜって紹介する記事です。 「OSSは使っていることを公言するだけでも貢献になる」とsongmuさんが言っていたので、私も貢献したいと思います。 紹介する順番に特に意味はありません。 rtx 個人的お気に入り度: ★★★★★ スター数: 3700 Rustで作られている💯 LICENSE: MIT 初っ端は、rtxです。あらゆるプログラミング言語環境(Runtime)のマネージャーです。 公式のデモ画像を見ていただくのが一番早いと思います。 私はこれを使う前はanyenvというも
【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
Nuxt Server Components を試す
設定ファイルと app.vue だけのごく質素なプロジェクトが生成された（こんな感じ）。前はもっと色々なファイルがあった気がする。慣れている人には余計なものがなくてよさそうだが、Nuxt を初めて使うような場合は途方に暮れそう。 公式ドキュメントに貼られている動画の内容を再現していく。 0:53 まずは通常通りにコンポーネントを作る。 これはマークダウンの文字列を HTML にパースして表示するコンポーネントで、変換には markdown-it というファイルサイズが大きいライブラリを使う。 <script setup lang="ts"> import MarkdownIt from 'markdown-it'; const md = new MarkdownIt(); const string = `# my component - markdown list - rendered a
Nuxt 3.9 · Nuxt Blog
Nuxt 3.9 is out - a Christmas gift from the Nuxt team bringing Vite 5, interactive server components, new composables, a new loading API and more. A very merry Christmas to you and yours from all Nuxters involved in this release! 🎁🎄 We have lots of features packed into v3.9 and can't wait for you to try them out. ⚡️ Vite 5This release comes with Vite 5 and Rollup 4 support. Module authors may ne
BCD Design によるコンポーネントの分類 - Qiita
atoms を atoms であり続けさせるための工夫は以前記事に書いたので参考にしてみてください。 AtomicDesign の atom より小さな世界の扉を開く 軸の転換 粒度軸重視から概念軸重視へ 以下は簡単なブログサービスで作成するであろうコンポーネントを5つの方法で分類した例です。 粒度軸で分類しても、概念軸の分類をしないとキレイな構造にはならない 概念軸で分類すると、粒度軸で分類しなくてもかなりキレイな構造になる 概念軸と粒度軸で分類すると、非常にバランスの取れた構造になる 概念軸と関心で分類すると、スケールに強くなる 5 概念軸と関心と粒度軸で分類すると、スケールに強く、関心をまとめつつ粒度の恩恵も得られる 5 なぜ粒度軸より概念軸なのか 粒度軸の中で概念軸の分類を行う 概念軸の中で粒度軸の分類を行う この2つの一番大きな違いは、関心のまとまりです。 DDD の基本でもある
Nuxt 3 組み込みの新機能「Typed Pages」で型安全なルーティング
2022年末に正式リリースされた Nuxt 3 ですが、数多くの強力な機能を備えており、リリース後にもマイナーバージョンアップを続けているため、意外と知られていない機能が眠っていたりします。 今回はその中でも、かなり多くの方がその恩恵を受けられるはずなのに、少し知名度の低い印象のある、Typed Pages 機能について紹介したいと思います。 Typed Pages とは Typed Pages は、<NuxtLink> や useRoute() などの Vue Router を利用したルーティング管理において、指定したパスが実際に存在しているかどうかを厳格にチェックしてくれるようになる機能です。 Nuxt 3 で型安全なルーティングを実現する方法として、Nuxt Typed Router というモジュールもありますが、これとは別に、実は追加ライブラリを入れなくても Nuxt 自体がビルト
【日本人エンジニア必携】英語命名規則の決定版 - Qiita
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに 英語での適切な命名は、コードの可読性や保守性を向上させるために重要です。適切な命名規則を守ることがコードの理解や共有において不可欠です。 英語での命名規則を学び、適切な命名を行うことで、コードの読みやすさや保守性を向上させ、チーム全体でのコードの理解を促進する手助けとなります。 この記事では、日本人エンジニアが英語での命名規則を理解し、適切な命名を行うための指針を提供します。 命名フローチャート 変数 関数 クラス 1. 変数 1-1. boolean 1-1-1. 存在するかどうかのフラグ 名詞 + exists
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
daisyUI — Tailwind CSS Components ( version 4 update is here )