発行
AstroとSvelteを使って作成したサイトをGitHub Pagesで公開します。GitHub Actionsを使ってビルド処理を自動化しておきましょう。公開後の運用やAstroのSSRモードについても触れます。
通信状況が悪い場合のユーザー体験も考慮した開発をするには、通信状況をシミュレートする必要があります。本記事では、Google ChromeのDevToolsやmacOSの「Network Link Conditioner」を使ったシミュレート方法を紹介します。
ユーザーが情報を更新した場合やユーザー以外の要因でデータが更新された場合など、表示されているデータを更新したいケースがあります。そういった、一度取得したデータの再取得をTanStack Queryで行う方法を考えます。
発行
今回は主にES2018からES2024までで追加された、比較的新しい配列操作メソッドのうち「新しく配列をつくるメソッド」について解説します。これまで煩雑だった処理がシンプルになるケースもあります。
CSS Nesting仕様にはスタイルルールだけでなく@ルールのネストも定義されています。今回はネストできる@ルールについて紹介します。
ヘッドレスCMSの特徴や種類を押さえつつ、選定方法のポイントを考えます。ヘッドレスCMSをあえて使わないケースや、その場合の選択肢についても考慮してみましょう。
発行
子要素の余白を調整するmargin-trimプロパティについて解説します。コンポーネントを組み合わせて作るウェブアプリやウェブサイトでは、強力なレイアウト支援手段となるでしょう。
createQuery()には、staleTimeとgcTimeという2つのオプションがあります。これらを用いて、データの取得タイミングを制御する方法を解説します。
Astroと組み合わせて使うのに相性がよいライブラリ「Pagefind」を使って、サイト内検索機能を実装します。プレビューでは検索機能は動作しないので、ビルド後に確認する点に注意しましょう。
発行
CSS Nesting仕様について、基本で紹介していなかった使い方や、新たに追加されたネスティングセレクターの挙動を説明します。
Visual Editing設定をした管理画面をデプロイし、コンテンツ管理者がURLひとつで、管理画面にアクセスできる仕組みをつくります。後編では、プロジェクト側の設定や、Vercelなどの設定を行います。
特定のものだけ画面幅いっぱいに広げるというレイアウトを、サブグリッドを使ってシンプルに実装してみます。また、いままで学んだことを盛り込み、サブグリッドでグリッドシステムを実装するデモも見てみます。