第641号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸Floating UI Reactで作るUIコンポーネント 第2回 ポップオーバーUI
🔸Playwrightでラクして行うブラウザ動作確認 第1回 ゆるE2Eのススメ
🔸抽象構文木で検索するast-grepの使い方 ast-grep検索の基本
codegrid.net/issues/641/
#codegrid
07.08.2025 08:28 — 👍 0 🔁 0 💬 0 📌 0
Floating UI Reactで作るUIコンポーネント | 第2回 ポップオーバーUI：重なりや切れの解決と配置調整
前回はポップオーバーの開閉や閉じる処理を実装しました。今回は、ポータル化で表示の切れや重なりを防ぎ、flipで位置を自動調整する方法を解説します。
【本日公開】一から実装すると大変な、ポップオーバーUIのパネルの重なりや位置の調整ですが、Floating UI Reactでは、やりやすくなっています：Floating UI Reactで作るUIコンポーネント - ポップオーバーUI：重なりや切れの解決と柔軟な配置調整 www.codegrid.net/articles/202... #codegrid
07.08.2025 08:24 — 👍 0 🔁 0 💬 0 📌 0
抽象構文木で検索するast-grepの使い方 | ast-grep検索の基本
従来のgrepとは異なり「コードの構造」を理解して検索・置換を行うast-grepの基本的な使い方を紹介します。
【本日公開】ASTベースで検索できるast-grepの使い方を解説。「構文としての意味」に着目し、grepでは難しかった調査や置換が楽になります。コードリーディングやリファクタリングでも重宝しそうです：抽象構文木で検索するast-grepの使い方 - ast-grep検索の基本 www.codegrid.net/articles/202... #codegrid
07.08.2025 08:22 — 👍 0 🔁 0 💬 0 📌 0
Floating UI Reactで作るUIコンポーネント | 第2回 ポップオーバーUI：重なりや切れの解決と配置調整
前回はポップオーバーの開閉や閉じる処理を実装しました。今回は、ポータル化で表示の切れや重なりを防ぎ、flipで位置を自動調整する方法を解説します。
【本日公開】一から実装すると大変な、ポップオーバーUIのパネルの重なりや位置の調整ですが、Floating UI Reactでは、やりやすくなっています：Floating UI Reactで作るUIコンポーネント - ポップオーバーUI：重なりや切れの解決と柔軟な配置調整 www.codegrid.net/articles/202... #codegrid
07.08.2025 08:22 — 👍 0 🔁 0 💬 0 📌 0
第640号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸Canvasの最新情報2025 HTMLを描画するHTML-in-Canvas API
🔸デザイナーに知ってほしいWebの基本 第1回 知ってほしい基本とは、何か？
🔸focus()メソッドの新しいオプション 前編 preventScrollオプションの活用
codegrid.net/issues/640/
#codegrid
31.07.2025 12:15 — 👍 0 🔁 0 💬 0 📌 0
第640号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸Canvasの最新情報2025 HTMLを描画するHTML-in-Canvas API
🔸デザイナーに知ってほしいWebの基本 第1回 知ってほしい基本とは、何か？
🔸focus()メソッドの新しいオプション 前編 preventScrollオプションの活用
codegrid.net/issues/640/
#codegrid
31.07.2025 09:17 — 👍 1 🔁 0 💬 0 📌 0
デザイナーに知ってほしいWebの基本 | 第1回 知ってほしい基本とは、何か？
このシリーズでは、エンジニアの視点で、デザイナーに知ってほしいことをお伝えするシリーズです。第1回では、エンジニアとデザイナーの間にどのようなギャップがあるのかを明らかにします。
【本日公開】エンジニア視点でWebデザイナーに知ってほしいことを橋渡し。Webデザインの完成はカンプではなくブラウザ上です。ネイティブ要素でできることを押さえれば、手戻りが減る可能性が大：デザイナーに知ってほしいWebの基本 - 知ってほしい基本とは、何か？ www.codegrid.net/articles/202... #codegrid
31.07.2025 09:12 — 👍 0 🔁 0 💬 0 📌 0
「今回のワークショップは他の人におすすめしたいですか？」という円グラフ」8件の回答とある。
青い円グラフで、100％「はい」となっている。
【ワークショップ情報】
前回の参加者の全員（アンケート回答者）が、「他の人におすすめしたい！」と言ったワークショップが再び開催されます。
申し込みは今日まで！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜
codegrid.net/workshops/20...
#codegrid_ws
22.07.2025 03:00 — 👍 0 🔁 0 💬 0 📌 0
ワークショップで使うテキストの写真。暑さが8mmほどある、きちんとした製本版の書籍。
【ワークショップ情報】
CodeGridワークショップのテキストはこのボリューム。
参加申し込みは7月22日までです！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道
codegrid.net/workshops/20...
#codegrid #codegrid_ws
21.07.2025 08:16 — 👍 1 🔁 0 💬 0 📌 0
第639号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸フロントエンド・エンジニアのためのスキルアップ術 OSS活動から得られるもの
🔸「良いフォーム」ってなんだろう 最終回
🔸JSXで実装するUIライブラリに依存しないコンポーネント 第7回
codegrid.net/issues/639/
#codegrid
21.07.2025 00:00 — 👍 1 🔁 0 💬 0 📌 0
CodeGridワークショップの様子。会議室のような場所で、1つの机に向かい合って講師1名と参加者が7名並んで座っている。壁にはモニタがあり、コードやWebサイトが表示あれている。
【ワークショップ情報】
CodeGridワークショップは、少人数で質問しやすい雰囲気です。
参加申し込みは7月22日まで！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道
codegrid.net/workshops/20...
#codegrid #codegrid_ws
20.07.2025 11:00 — 👍 2 🔁 1 💬 0 📌 0
前回参加者の声を紹介
テキストの内容がとても丁寧でわかりやすかったです。
メンターさんとのスピンアウトの会話が特に学びになりました。
良いテキストがあるので、復習などが自分で行いやすい。
初めて、フレームワークというものに触れましたが、アレルギーを起こすことなくAstroのメリットを強く感じることができました。
【ワークショップ情報】
CodeGridワークショップの前回の参加者の声をお届け！
参加申し込みは7月22日までですよ〜。
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道
codegrid.net/workshops/20...
#codegrid #codegrid_ws
19.07.2025 12:01 — 👍 0 🔁 0 💬 0 📌 0
ワークショップのテキストのPDF。以下の内容が書かれている。
ページの title を変更しよう
Layout コンポーネント
先ほど編集した src/pages/index.astro では、 <Layout> という HTML にはないタグが使 われていました。
---
import PageHeader from '../components/PageHeader.astro';
import Layout from '../layouts/Layout.astro';
---
<Layout>
<PageHeader /> <h1>ようこそ私のホームページへ</h1>
</Layout>
この <Layout> もまた、PageHeaderと同様に、コンポーネントです。 ただし、「ページ自体の 構造」として、ページ内に一度しか登場しない特別なコンポーネントで「レイアウトコンポーネ ント」と呼ばれています。先ほど作ったPageHeaderのような汎用コンポーネントとは少しだけ 役割が異なります。 Layout コンポーネントは、 title や meta タグ、外部 CSS ファイルの読 み込みなど、Web サイト内の複数のページに共通する部分をまとめておくためのものです。
Layout コンポーネントの役割
Astroで環境を準備した際、最初から用意されている Layout コンポーネントの中身を見てみま しょう。冒頭で import (読み込み)している、 src/layouts/Layout.astro を開きます。
VS Code では、 import 文の箇所を右クリックし、 定義へ 移動 を選択すると、参照先ファイルを開けて便利です。
ファイルを開いてみると、 src/layouts/Layout.astro の中身は次のようになっています。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
【ワークショップ情報】
ワークショップのテキストでは、豊富な図版とコードで、ワークショップでの理解をしっかりサポートしますよ〜。
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
📷 東京：表参道
参加申し込みは7月22日まで！
codegrid.net/workshops/20...
#codegrid #codegrid_ws
18.07.2025 09:09 — 👍 0 🔁 0 💬 0 📌 0
ワークショップのテキストの一部のPDF。内容は以下が書かれている。
はじめに
CodeGrid ワークショップ 2025 にようこそ！
体験できる技術
このワークショップでは、Astro を使った Web サイト制作、コードの管理、公開（デプロイ）までの流れを体験していきます。
- Astro で Web サイトを開発する
- トップページを作成する
- ヘッダーのコンポーネント（パーツ）を個別に作成する
- レイアウト機能で title タグや meta タグを管理する
- 2 ページ目を作成する
- GitHub でコードを管理する
- Cloudflare Pages で自動デプロイする
このテキストで使用しているツール
ワークショップではツールの以下のバージョンを使用しています。
- Astro v5.x
- GitHub Desktop Version 3.4.18（macOS 版）
- Node.js v22.14.0
-
なお、ツールや画面などは仕様やデザインが変更される可能性があります。
Astro: Webサイト制作のためのフレームワーク
一般的に Web サイトは複数ページで構成され、それらのページはインターネットで公開されます。
Astro は、次のような機能があります。
- 使い回す共通パーツを 1 カ所で管理
- 複数ページをテンプレート化して一括管理
- ブログなどの複数ページコンテンツの一括管理
Web サイトの開発を効率化できる機能が備わった、Web サイト制作のためのフレームワークです。
実際にさまざまな Web サイトでも使われています 。 （2025 年 4 月時点）
- IKEA
- Netlify
- SmartHR 採用サイト
- 集英社採用サイト
- CodeGrid
1. https://astro.build/
2. https://astro.build/showcase/
3. https://www.ikea.com
4. https://www.netlify.com
5. https://recruit.smarthr.co.jp
6. https://www.shueisha.co.jp/saiyo
7. https://www.codegrid.net
【ワークショップ情報】
CodeGridワークショップでは、130ページ超えのオリジナル製本版テキストで進行します。
その内容を、少しチラ見せ！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京：表参道
参加申し込みは7月22日まで！
codegrid.net/workshops/20...
#codegrid #codegrid_ws
18.07.2025 09:08 — 👍 0 🔁 0 💬 1 📌 0
第639号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸フロントエンド・エンジニアのためのスキルアップ術 OSS活動から得られるもの
🔸「良いフォーム」ってなんだろう 最終回
🔸JSXで実装するUIライブラリに依存しないコンポーネント 第7回
codegrid.net/issues/639/
#codegrid
17.07.2025 08:33 — 👍 0 🔁 0 💬 0 📌 0
「良いフォーム」ってなんだろう | 最終回 体験が良いフォーム：autocomplete属性の指定
フォームに、autocomplete属性を適切に設定することで、ブラウザの補完機能が利用でき、利用者の入力体験が向上します。どんな項目があるか、見てみましょう。
【本日公開】住所やパスワードなど、入力ミスが起きやすい箇所は、ブラウザの自動入力機能で誤入力を減らすことができます。そのためには、適切なautocomplete属性の指定が必要です：「良いフォーム」ってなんだろう - 体験が良いフォーム：autocomplete属性の指定 www.codegrid.net/articles/202... #codegrid
17.07.2025 08:30 — 👍 0 🔁 0 💬 0 📌 0
第638号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸中断可能な処理を実現するAbortController
🔸Floating UI Reactで作るUIコンポーネント 第1回
🔸Svelte 5入門 第4回
codegrid.net/issues/638/
#codegrid
14.07.2025 00:00 — 👍 0 🔁 0 💬 0 📌 0
見開きの目次の項目が並んでいる。目次の内容は以下。
はじめに…6
体験できる技術…6
Astro を始めよう…10
ターミナルで好きなディレクトリに移動…10
ターミナルで Astro プロジェクトの置き場所に移動…10
Astro プロジェクトの作成…13
Astro プロジェクトを VS Code で開く…15
Astro サイトの動作確認…18
GitHub でコードを管理しよう…22
コードの変更履歴の重要性…22
Astro プロジェクトを GitHub Desktop で開く…22
GitHub Desktop でコミット…26
GitHub にリポジトリを作る…27
作成されたリポジトリの確認…28
Astro のコードに触れよう…30
Astro の仕組み…30
Astro プロジェクトのディレクトリ構造…31
トップページを編集してみる…33
ページの部品を作ろう…35
コンポーネントのファイルを作る…35
ヘッダーコンポーネントを実装する…36
補足：VS Code の再読み込み…37
ページにヘッダーを配置する…38
SVG ロゴ画像を表示する…41
ここまでの作業をコミットしよう…44
GitHub Desktop でコミット…44
GitHub リポジトリにプッシュ…45
ページの title を変更しよう…48
Layout コンポーネント…48
Layout コンポーネントの役割…49
子要素を表示する slot…50
日本語サイトの場合の修正…52
独自の属性を設定する props…52
Layout にヘッダーを統合する…56
コミット…57
Cloudflare Pages にデプロイしよう…58
ダッシュボードにログインする…58
ダッシュボードからデプロイを設定する…58
別のページも作ってみよう…63
about ページの作成…63
Layout 側でのスタイル調整…65
PNG 画像と Astro の自動最適化…67
お好みで横並びに…71
トップページにリンクを追加…73
デプロイしたサイトを更新しよう…75
ブログのコンテンツ管理について考えよう…76
各記事ページをどう増やしていくか…76
コンテンツだけ分けて管理する…76
【ワークショップ情報】
CodeGridワークショップで使用する、オリジナルテキストの目次をチラ見せ…👀
これでも、目次の半分なのですよ！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京、表参道駅周辺
codegrid.net/workshops/20...
11.07.2025 00:00 — 👍 1 🔁 0 💬 0 📌 0
第638号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸中断可能な処理を実現するAbortController
🔸Floating UI Reactで作るUIコンポーネント 第1回
🔸Svelte 5入門 第4回
codegrid.net/issues/638/
#codegrid
10.07.2025 09:03 — 👍 0 🔁 0 💬 0 📌 0
ワークショップテキストの写真。背表紙がつくほどの、厚みがあるA5版のテキスト。『Astro×GitHub×Cloudflareで学ぶモダンなWeb開発』というタイトルと、キーボードに手が添えられているイラストが表示にある。
【ワークショップ情報】
CodeGridワークショップでは、前回も大好評だった120ページ超えのオリジナル製本版テキストを使ってじっくり学びます。参加申し込みは7月22日までですので、お早めに！
「Astro × GitHub × Cloudflare Pagesで学ぶモダンWeb開発」
🗓️ 8月1日（金）13時〜（オフラインで開催）
🪑 東京、表参道駅周辺
www.codegrid.net/workshops/20...
10.07.2025 08:03 — 👍 0 🔁 0 💬 0 📌 0
第637号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸「良いフォーム」ってなんだろう 第2回 体験が良いフォーム：全角／半角入力とパスワードの確認
🔸Svelte 5入門 第3回 親コンポーネントから子コンポーネントへの値の受け渡し
🔸Filloutを使ったフォーム作成 後編 外部サービスとの連携
codegrid.net/issues/637/
#codegrid
07.07.2025 00:00 — 👍 0 🔁 0 💬 0 📌 0
第637号 | CodeGrid
CodeGridはあなたのフロントエンド技術向上をサポートします
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸「良いフォーム」ってなんだろう 第2回 体験が良いフォーム：全角／半角入力とパスワードの確認
🔸Svelte 5入門 第3回 親コンポーネントから子コンポーネントへの値の受け渡し
🔸Filloutを使ったフォーム作成 後編 外部サービスとの連携
codegrid.net/issues/637/
#codegrid
03.07.2025 07:47 — 👍 0 🔁 0 💬 0 📌 0
ベンチャー企業で働くへなちょこエンジニアです
主に #JavaScript #TypeScript #React #Java 等を使用 #Web制作 #デザイン もしています ✌︎('ω'✌︎ )
エンジニアの繋がりを増やしていきたいのでぜひフォローお願いします！
from : osaka🇯🇵Japan
occupation：engineer💻
hobby : soccer⚽️ scuba diving🤿
👨💻Software Engineer | 🎮Gamer | 💻Tech & 🚗Car Enthusiast | 🐱Cat Person
sharunkumar.com
Frontend engineer @lapras-inc / ex-FireFighter 🔥
Developer of Sky Follower Bridge: www.sky-follower-bridge.dev
Donation☕ : https://ko-fi.com/kawamataryo
GitHub: github.com/kawamataryo
𝕏: x.com/KawamataRyo
Zenn: zenn.dev/ryo_kawamata
desktop publisher
minotake.dev
Software developer at https://findy.co.jp, #ng_fukuoka and #fec_fukuoka organizer, Ph.D. in Engineering. #angular #react #nxdevtools
長門スキー｡絵を描いたりすることもある｡
フロントエンドエンジニア
■HarmonicNotes (http://harmonicnotes.net)
■IDOBATA design (http://idobata-design.com)
マークアップ&フロントエンドエンジニア。アクセシビリティ・デザインシステム・ドキュメントサイトに興味があります👀
信州→京都→滋賀
Web frontend developer @ Cybozu, inc.
❤️Perfume(P.T.A. 粒), Beer, ElectroPops, Fab, Ski
📍Tokyo/Japan
https://sajiki.dev
Create and share social media content anywhere, consistently.
Built with 💙 by a global, remote team.
⬇️ Learn more about Buffer & Bluesky
https://buffer.com/bluesky
Web方面のエンジニアをしている / 最近は主にフロントエンド / PixelGrid Inc.
https://sayu.dev/
ここでは「仕事」と関係ないことだけ話すね
- https://twitter.com/emim
- Mastodon BRIDGE → https://bsky.app/profile/emim.fedibird.com.ap.brid.gy
静岡でJavaScriptのお仕事しています。最近はNext.js/React/Jamstackがメイン
Google Chrome DevRel Identity Tech Lead - Anything about browser identity features: passwords, OTPs, passkeys, identity federation, digital credentials, etc
