【Tips】
ES2025からJSONファイルを`import`文で直接読み込めるようになりました🎉
import config from "./config.json" with { type: "json" };
Fetch APIと違い、JavaScriptの実行前にファイルの存在と形式が検証されるため、「設定ファイルが読み込まれている」状態を保証できます👍
#codegrid #javascript #es2025
【本日公開】BaaS「Convex」はリアルタイム更新がデフォルトなので、「データが変われば画面も変わる」というシンプルな前提で実装できます。実はこれ、開発体験に大きく関わりますよ：Convex入門 - Convexを使ってみる www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸思想からみるメタフレームワークの選び方 第1回 なぜフレームワークの「思想」を知るべきなのか
🔸Convex入門 第1回 Convexを使ってみる
🔸Google Fontsで学ぶWebフォントの基本 第4回 next/font/googleの基本動作
www.codegrid.net/issues/670/
#codegrid
【本日公開】Next.js組み込みのフォント最適化モジュールnext/font/googleの働きによって、何が起きているかを探ります。外部リクエストの排除・プライバシー確保などを実現する仕組みを解説：Google Fontsで学ぶWebフォントの基本 - next/font/googleの基本動作 www.codegrid.net/articles/202... #codegrid
【本日公開】AIがコードを書いてくれる時代でもフレームワーク選定の失敗は起こる。人気ではなく「どんな問題への回答として作られたのか」という設計思想から選ぶ視点を解説します：思想からみるメタフレームワークの選び方 - メタフレームワークは「思想」で選ぶ www.codegrid.net/articles/202... #codegrid
先週公開した、Ghosttyとtmuxを中心としたターミナル環境構築の記事はこちら！
www.codegrid.net/articles/202...
ターミナルツールのGhosttyが1.3にアップデート。
社内エンジニアによると、
- キーバインドのモードを作って切り替えることができる「Key Tables」
- 1つのキーで複数のコマンドを実行できる「Chained Keybinds」
が便利そう！とのことですよ！
ghostty.org/docs/install...
【Tips】
JavaScriptでAPIから受け取った日本時間の日時を正しく扱うには、
ISO 8601形式で時差を明示しましょう⏰️
new Date('2025-11-01T18:00:00+09:00')
末尾に +09:00 を付けることで、タイムゾーン設定に関わらず
常にJST基準のUNIXタイムが生成されます💥
#codegrid #javascript
【Tips】
機能が拡張された、CSSの`attr()`を使うと、HTMLの属性値を「色」として扱えます🎨
div {
color: attr(data-color type(<color>), red);
}
data-color="blue" や data-color="#ff00b3" のように属性で色を指定でき、無効な値や属性なしのときはフォールバック値（`red`）が適用されます。
#codegrid #css
【最新記事】CodeGrid先週公開の3本はこちら！
🔸ターミナルを中心とした作業環境 Ghosttyとtmuxでターミナル環境を構築する
🔸文字組に関するCSSプロパティ 第6回 テキストの上下余白を制御するtext-boxプロパティ
🔸JSXで実装するUIライブラリに依存しないコンポーネント 最終回 単方向データフローとコンポーネント構成の実現
codegrid.net/issues/669/
#codegrid
【無料開放】
コードや文章を日々書いているエンジニアへ。AIエージェントを使い始めてから「絶対に活かした方が良い」と確信した筆者による体験談です✍️
ChatGPTによる検索力の置き換えから、Claude Codeでの並行作業まで——AIの使い方はここ数年で劇的に変化しています。あなたはどの段階にいますか？
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【無料開放】
あなたのフォーム、知らないうちに利用者を困らせていませんか？😓
全角指定、パスワードのコピペ禁止、細かく分割された入力欄……開発側の都合が体験を壊している典型例です。
悪いフォームの「あるある」を知ることで、良い実装のヒントが見えてきます。
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
【Tips】
new Date(‘2025-11-01 18:00:00’) のように
タイムゾーン情報なしで Date を生成すると、OSのタイムゾーンに依存します🕰️
「2025-11-01 18:00:00 が日本時間」のつもりでも、
海外環境では現地時刻として解釈されます。
特定のタイムゾーン前提なら、必ず明示しましょう。
#codegrid
【本日公開】propsのバケツリレーを回避し、状態管理とレンダリングロジックをコンポーネント間で共有する方法を解説します：JSXで実装するUIライブラリに依存しないコンポーネント - 単方向データフローとコンポーネント構成の実現 www.codegrid.net/articles/202... #codegrid
【本日公開】ようやく実用段階になってきた、テキストボックス上下の空白を制御するtext-boxを使いこなすには？ 対応ブラウザ、値に使われるフォントの基準線についても解説します：文字組に関するCSSプロパティ - テキストの上下余白を制御するtext-boxプロパティ www.codegrid.net/articles/202... #codegrid
【本日公開】CodeGrid今週公開の3本はこちら！
🔸ターミナルを中心とした作業環境 Ghosttyとtmuxでターミナル環境を構築する
🔸文字組に関するCSSプロパティ 第6回 テキストの上下余白を制御するtext-boxプロパティ
🔸JSXで実装するUIライブラリに依存しないコンポーネント 最終回 単方向データフローとコンポーネント構成の実現
codegrid.net/issues/669/
#codegrid
【本日公開】AIエージェントでの作業を快適にするGhostty＋tmux構成を紹介します。複数のAIエージェントを同時に動かすなら、ターミナル環境の整備が効いてきますよ：ターミナルを中心とした作業環境 - Ghosttyとtmuxでターミナル環境を構築する www.codegrid.net/articles/202... #codegrid
【最新公開一覧】CodeGrid先週公開の3本はこちら！
🔸Google Fontsで学ぶWebフォントの基本 第3回 font-displayとフォント読み込み中の表示
🔸AIエージェントのススメ 第6回 サブエージェントの落とし穴
🔸任意のCSSプロパティで使用できるattr()関数 後編 CSS Gridや画像URLの属性指定への応用
www.codegrid.net/issues/668/
#codegrid
【本日公開】 Webフォントの読み込み中、テキストが見えなかったり突然切り替わったりするのはなぜ？ font-displayでの制御方法を日本語フォントならではの注意点も併せ解説します：Google Fontsで学ぶWebフォントの基本 - font-displayとフォント読み込み中の表示 www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸Google Fontsで学ぶWebフォントの基本 第3回 font-displayとフォント読み込み中の表示
🔸AIエージェントのススメ 第6回 サブエージェントの落とし穴
🔸任意のCSSプロパティで使用できるattr()関数 後編 CSS Gridや画像URLの属性指定への応用
www.codegrid.net/issues/668/
#codegrid
【本日公開】強化されたattr()関数の実践的な活用法を解説します。grid-columnやimage-set()との組み合わせなど応用例を見てみましょう：任意のCSSプロパティで使用できるattr()関数 - CSSのattr()関数の応用 www.codegrid.net/articles/202... #codegrid
【本日公開】AIエージェントのサブエージェントにMarkdownフォーマッターを開発させたら、一つ直せば別が壊れる泥沼に。その原因と、サブエージェントの使い所を解説します：AIエージェントのススメ - サブエージェントの落とし穴 www.codegrid.net/articles/202... #codegrid
【最新記事一覧】CodeGrid先週公開の3本はこちら！
🔸任意のCSSプロパティで使用できるattr()関数 CSSのattr()関数の基本
🔸CSSでの文字縁取りを考える 描画上の制約と、その対策
🔸JSXで実装するUIライブラリに依存しないコンポーネント 第10回 状態とUIの分離
codegrid.net/issues/667/
#codegrid
【本日公開】状態とUIの分離をUIライブラリなしで実現する方法を解説。DOM置換による再レンダリングから、フォーカス制御や部分更新まで具体例で紹介します：JSXで実装するUIライブラリに依存しないコンポーネント - 状態とUIの分離 - DOM置換による再レンダリング www.codegrid.net/articles/202... #codegrid
【本日公開】-webkit-text-strokeの制約と代替手法を解説。linecap／linejoin未対応や複数ストローク不可などの仕様差を整理し、代替としてtext-shadow多重指定やSVGフィルター活用の実装を紹介します：CSSでの文字縁取りを考える - 描画上の制約と、その対策 www.codegrid.net/articles/202... #codegrid
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸任意のCSSプロパティで使用できるattr()関数 CSSのattr()関数の基本
🔸CSSでの文字縁取りを考える 描画上の制約と、その対策
🔸JSXで実装するUIライブラリに依存しないコンポーネント 第10回 状態とUIの分離
codegrid.net/issues/667/
#codegrid
【本日公開】今ひとつ使い所がなかったattr()関数の機能ですが、大きく拡張されています。任意のCSSプロパティで使用でき、属性値を「色」や「数値」などとして扱えるようになっていますよ！：任意のCSSプロパティで使用できるattr()関数 - CSSのattr()関数の基本 www.codegrid.net/articles/202... #codegrid
【お知らせ】
オンラインメディアCodeGridでは、技術記事配信のほか、購読者限定でDiscordコミュニティもやっています‼️
著者と直接話せたり、技術の話をゆるっと深掘りしたり。
ライブ配信も不定期で開催中📽️
記事を読むだけじゃない、もう一歩先のCodeGrid👇️
www.codegrid.net/discord
【先週公開一覧】CodeGrid最新の3本はこちら！
🔸行く2025年、来る2026年 最終回 デザインと実装編
🔸Google Fontsで学ぶWebフォントの基本 第2回 preconnectとCORSを理解する
🔸AIエージェントのススメ 第5回 私の思う重要とあなたの思う重要は違う
codegrid.net/issues/666/
#codegrid
Webフォントの読み込みは通信最適化によって速くできます。preconnectで何が短縮されるのか、なぜフォント取得にCORSとcrossoriginが必須なのかを整理。通信の仕組みから理解しましょう：Google Fontsで学ぶWebフォントの基本 - preconnectとCORSを理解する www.codegrid.net/articles/202... #codegrid
