はじめに2024 年 12 月 3 日、Astro 5.0 がリリースされましたが、v5 の目玉機能の一つが Server Islands です。この記事では、Next.js の Partial Prerendering などの各レンダリングモデルと比較しながら、Server Islands の概要や仕組みについて解説します。「基本的に Server Islands は Astro 版の Partial Prerendering といえるが、動的なコンテンツの取得方法という点において両者は決定的に異なっており、そのことの帰結として Server Islands はパフォーマンスに...

tl;drhttps://twitter.com/bholmesdev/status/1784972421776199697 はじめに2024 年の 4 月 24 日に Node.js 22 がリリースされました。ESM を 条件付きで require する機能や、--run フラグによる npm スクリプトのパフォーマンス改善などが v22 で追加され、2009 年に Ryan Dahl が Node.js をリリースしてから 15 年が経つ今も、Node.js は進化を続けています[1]。こうして Node.js 自身が強化されていくにつれ、以前はサードパーティーのパッ...

はじめに以前 uhyo さんにより「HTML はプログラミング言語である」と示されたことは記憶に新しいところですが、昨年末の HTML, The Programming Language の登場により、その主張はより強固なものとなりました。現代ではもはや、HTML は立派なプログラミング言語であるということは疑いようがありません。この記事では、プログラミング言語 HTML, The Programming Language について、その概要と基本的な文法について説明します。そして最後に、HTML プログラミングの応用例として FizzBuzz やフィボナッチ数列の実装例を見てい...

はじめにAstro は、コンテンツが豊富なウェブサイトの作成に適したウェブフレームワークです。CMS や Markdown から得たデータを取得し静的サイトをビルドする Static Site Generator のように使うこともできますが、一方で Islands Architecture を背景に React や Svelte など好みの UI フレームワークを使って動的な要素をページに追加することも可能です。また、SSR や Middleware、Endpoints などを活用し、サーバーサイドでも動作する本格的なアプリケーションの作成も可能です。Astro についてより詳し...

訳者序文以下の文章は、shadcn/ui の内部構造について解説している The anatomy of shadcn/ui を、原著者である @manupadev 氏の許可のもとに日本語へと翻訳したものです。shadcn/ui のモチベーションや使い方に関する日本語の解説は少なくありませんが、その実装に焦点を絞って解説した文章は、訳者が知る範囲では存在しませんでした。shadcn/ui は単にコンポーネントライブラリとして優れているだけでなく、同時にコンポーネントの実装パターン集としても学ぶところが多く、そのエッセンスを知ることは多くの開発者にヒントを与えるだろうと訳者は考えてい...

はじめに10 月 26 日に Next.js Conf が開催されましたが、それと前後して Kent C. Dodds (以下 kentcdodds と呼びます) と Lee Robinson (以下 leerob と呼びます) がそれぞれhttps://www.epicweb.dev/why-i-wont-use-nextjshttps://leerob.io/blog/using-nextjsという記事を公開しました。前者はタイトルの通り、Testing Library の作者であり、Remix の共同創業者の一人でもある開発者兼教育者 kentcdodds が、Next...

はじめにGitHub Actions のワークフローを管理したり、あるいは Pull Request テンプレートを置いたりなど、常日頃からお世話になっている .github ディレクトリですが、最近ふと「このディレクトリでできることを自分は網羅的に把握していない」ということに気付きました。そこで GitHub Docs で .github ディレクトリに関する総合的な解説資料を探してみたのですが、個別の用途に関するページなどはすぐに見つかるものの、.github ディレクトリそのものをターゲットとしたページは存在しないようでした（もしご存知の方がいれば教えていただけるとありがたい...

はじめにReact のドキュメンタリー動画 React.js: The Documentary が、2023 年 2 月 10 日に公開されました:https://www.youtube.com/watch?v=8pDqJVdNa44動画は 1 時間 18 分ほどあり、React の誕生から普及までを当事者たちが語る形式となっています。動画自体は大変に素晴らしいのですが、その中で言及されている資料やツイートが多く、個人的に気になったため、動画に登場する時系列順にまとめてみました。すべてを網羅できているわけではありませんが、大半はおさえることができたのではないかと思っています。...

はじめにこの記事では、フロントエンドのレンダリングパターンの 1 つである Islands Architecture について概略した上で、Astro における Islands Architecture の実現方法をチュートリアル的に解説します。Astro は 2022 年の 8 月に v1 がリリースされたばかりの UI フレームワークであり、ユーザーもまだそれほど多くはないと思われるため、なるべく前提知識がない方でも理解できるように各ステップの説明を細かく噛み砕いておこなうつもりです。また最後に補論として、Astro v2 について本論と絡めて簡単に紹介します。 Astro...

はじめに2022 年 9 月 22 日、Vercel の DevRel である Steven Tey 氏が dub.sh という短縮 URL 生成サービスを公開しました:https://dub.sh裏側は Vercel の Edge Functions + Upstash Redis という組み合わせらしいのですが、サイトを訪れた際の第一印象が心地よかったため、なんとなく自分も手を動かして URL shortener の簡易版を作りたくなってしまいました。ただ、まったく同じ構成で作成しても面白くないため、自分があまり触ったことがない技術を使うという縛りを設け、Edge 環境とし...

はじめに2022 年 7 月、Vercel は Build Output API という新しい機能をリリースしました[1]。Vercel というと、最近では Layouts RFC が Next.js のルーティング、レイアウト、データ取得の構造を大きく変えるということでもっぱら話題になっているようです。一方、Build Output API はそれほど大きな注目を集めているわけではないようですが、調べてみると、実行環境としての Vercel というプラットフォームへと他のフレームワークを統合することを目指した野心的な試みであることがわかり、非常に興味深かったため、記事としてまとめ...

本書は、Lydia Hallie 氏 と Addy Osmani 氏らによる Learning Patterns (https://www.patterns.dev/) の日本語訳です。原著は大きく 3 つのセクションに分かれていますが、本書は、その最初のセクションである Design Patterns を訳したものとなります。

はじめに仕事で使用することになった NestJS について、公式の NestJS Fundamentals Course やドキュメントなどで勉強を進めているのですが、新しい概念が次々と現れるため消化しきれなくなってきました。そこで、まず全体の俯瞰図をしっかりと頭に入れるために、公式ドキュメントの Overview に出てくる範囲の概念を図解して整理し、また各々の役割やプロジェクト内のどこにどのように設定していくかについてまとめることにしました (逆に、大枠とは関係ない部分については大胆に省きました)。対象読者としては、簡単な CRUD アプリケーションなどを NestJS によ...

GitHub CLI 1.0 がリリースされました。Zenn へと投稿するのは初めてなので、Zenn と連携するリポジトリを gh コマンドを通じて操作することで、gh コマンドの使用感の確認と Zenn への投稿を同時におこなってみます。Zenn での記事の作成方法については以下の記事を参考にしました:Zenn CLIを使ってコンテンツを作成する gh のインストールMac の場合は Homebrew または MacPorts からインストールすることが可能です:$ brew install ghあるいは$ sudo port install ghLinux 環境...