【最新公開一覧】CodeGrid先週公開の3本はこちら🎉
🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定
🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む
🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得
codegrid.net/issues/672/
#codegrid
0
0
0
0
Hashtag
#codegrid
Advertisement · 728 × 90
【無料公開】
「AIがコードを書くなら、プログラミングを覚える必要はない」という声があります。でも、本当にそうでしょうか？
AIはプロフェッショナルの「責任」と「信頼」を引き受けられない——そんな視点から、AI時代に求められるスキルと考え方を論じます。学び続けることの意味を改めて考えさせられる記事です✨
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
1
0
0
0
【本日公開一覧】CodeGrid今週公開の3本はこちら🎉
🔸Google Fontsで学ぶWebフォントの基本 最終回 next/font/googleの詳細設定
🔸思想からみるメタフレームワークの選び方 第2回 Astroの思想を読む
🔸Convex入門 第2回 Convexの開発環境の構築とデータの取得
codegrid.net/issues/672/
#codegrid
0
0
0
0
【本日公開】開発環境のサーバーも立ち上げ不要。Convexのクラウド開発スタイルのシンプルさを、実際のコードを通じて紹介します：Convex入門 - Convexの開発環境の構築とデータの取得 www.codegrid.net/articles/202... #codegrid
0
0
0
0
【本日公開】コンテンツサイトになぜJavaScriptランタイムを大量に届けるのか。Astroの問題意識を辿ると、アイランドアーキテクチャとサーバーファーストの原則が一貫した設計思想として理解できます：思想からみるメタフレームワークの選び方 - Astroの思想を読む www.codegrid.net/articles/202... #codegrid
0
0
0
1
【Tips】
ES2025からJSONファイルを直接読み込めるようになりましたが、その最大のメリットは「JavaScriptを実行する前に読み込める」こと💁♀️
Fetch APIだとJS実行時に初めてリクエストが走るため、ファイルの存在は実行してみないとわかりません。import文なら依存解決の段階でエラーが出るので、「JSONが確実にある」前提でアプリを設計できます👍
#codegrid #javascript
0
0
0
0
【Tips】
SVGアイコンをstrokeで表現するとき、fillの明示に要注意です⚠️
fillの初期値はblack（#000） なので、fillを指定しないと図形の内側が黒で塗りつぶされてしまいます。
strokeだけで表現したいアイコンには必ずfill="none"を指定しましょう😀
#codegrid #svg
0
0
0
0
【細心公開一覧】CodeGrid先週公開の3本はこちら！
🔸現場で読み解く、ソフトウェアの原理原則 第1回 まとめてよいコードと、まとめてはいけないコード
🔸SVGフィルタで拡張するCSSの表現 第1回 SVGフィルタの基本と表現例
🔸AIエージェントのススメ 第7回 技術知識の重要性
www.codegrid.net/issues/671/
#codegrid
0
0
0
0
【無料公開】
フレームワークがWebフォントを自動最適化してくれているけど、実際に何をしているのかわかりますか？🤔
`preconnect`や`crossorigin`がなぜ必要なのか、日本語フォントでwoff2がたくさん読み込まれる理由など、「なんとなく使っている」から「仕組みから説明できる」状態へ。Google Fontsを例に、ブラウザの処理フローを丁寧に解説します
www.codegrid.net/articles/202...
#codegrid #css #webfont
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
0
0
0
0
【Tips】
JSONファイルをimport文で読み込む際は`with { type: "json" }`の指定が必要です😀
import config from "./config.json" with { type: "json" };
この`with { }`は「インポート属性」と呼ばれるES2025の新構文で、モジュールの解釈方法や扱い方に関する追加情報をブラウザに伝えるための仕組みです。
#codegrid #javascript #es2025
0
0
0
0
【本日公開】「CSSのfilterで物足りない」と感じたことはありませんか。url()でSVGフィルタを呼び出すと、歪み・色収差・炎など、標準関数では届かない表現が実現できます：SVGフィルタで拡張するCSSの表現 - SVGフィルタでCSSの表現を拡張する www.codegrid.net/articles/202... #codegrid
0
0
0
0
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸現場で読み解く、ソフトウェアの原理原則 第1回 まとめてよいコードと、まとめてはいけないコード
🔸SVGフィルタで拡張するCSSの表現 第1回 SVGフィルタの基本と表現例
🔸AIエージェントのススメ 第7回 技術知識の重要性
www.codegrid.net/issues/671/
#codegrid
0
0
0
0
【本日公開】AIがいれば技術知識は不要──そんなわけはありません。問題をどう解くかを考えるプロセスは必要なのです。問題を考えずにAIに丸投げしたことで、Markdownフォーマッター開発で1週間を溶かした失敗談です：AIエージェントのススメ - 技術知識の重要性 www.codegrid.net/articles/202... #codegrid
0
0
0
0
【本日公開】「似ているコードをまとめよう」は本当に正しいのでしょうか。DRY原則には、「見た目が似ている＝まとめる」と解釈すると踏んでしまう落とし穴があります：現場で読み解く、ソフトウェアの原理原則 - まとめてよいコードと、まとめてはいけないコード www.codegrid.net/articles/202... #codegrid
1
0
0
0
【Tips】
PCは内部でUTCをUNIXタイム（1970年1月1日からのミリ秒）で管理し、
タイムゾーン設定に応じて表示だけを変えています。
JavaScriptのDateオブジェクトも同じ仕組みで、
内部はUNIXタイムを保持しています。
この基礎を押さえると、時差まわりのバグが減ります👍
#codegrid #javascript
0
1
0
0
【Tips】CSSの新attr()は、時間の単位`s`も使えます⏳️
div {
transition-duration: attr(data-duration s, 3s);
}
要素ごとにHTMLからアニメーション時間を変えられます。
style属性で直書きとは違い、CSS側で値を制御できるのがポイントです😀
#codegrid #css
0
0
0
0
【最新記事一覧】CodeGrid先週公開の3本はこちら！
🔸思想からみるメタフレームワークの選び方 第1回 なぜフレームワークの「思想」を知るべきなのか
🔸Convex入門 第1回 Convexを使ってみる
🔸Google Fontsで学ぶWebフォントの基本 第4回 next/font/googleの基本動作
www.codegrid.net/issues/670/
#codegrid
0
0
0
0
【無料公開】
「テーブルは古くてレガシー、カードはモダン」──そんな印象でUIを選んでいませんか？
テーブルUIとカードUIには、見かけ以上に本質的な構造の違いがあります。情報の用途を正しく理解すれば、迷わず選べるようになります✨
www.codegrid.net/articles/202...
#codegrid #ui
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
0
0
0
0
【Tips】
ES2025からJSONファイルを`import`文で直接読み込めるようになりました🎉
import config from "./config.json" with { type: "json" };
Fetch APIと違い、JavaScriptの実行前にファイルの存在と形式が検証されるため、「設定ファイルが読み込まれている」状態を保証できます👍
#codegrid #javascript #es2025
2
0
0
0
【本日公開】BaaS「Convex」はリアルタイム更新がデフォルトなので、「データが変われば画面も変わる」というシンプルな前提で実装できます。実はこれ、開発体験に大きく関わりますよ：Convex入門 - Convexを使ってみる www.codegrid.net/articles/202... #codegrid
0
0
0
0
【本日公開一覧】CodeGrid今週公開の3本はこちら！
🔸思想からみるメタフレームワークの選び方 第1回 なぜフレームワークの「思想」を知るべきなのか
🔸Convex入門 第1回 Convexを使ってみる
🔸Google Fontsで学ぶWebフォントの基本 第4回 next/font/googleの基本動作
www.codegrid.net/issues/670/
#codegrid
0
0
0
0
【本日公開】Next.js組み込みのフォント最適化モジュールnext/font/googleの働きによって、何が起きているかを探ります。外部リクエストの排除・プライバシー確保などを実現する仕組みを解説：Google Fontsで学ぶWebフォントの基本 - next/font/googleの基本動作 www.codegrid.net/articles/202... #codegrid
0
0
0
0
【本日公開】AIがコードを書いてくれる時代でもフレームワーク選定の失敗は起こる。人気ではなく「どんな問題への回答として作られたのか」という設計思想から選ぶ視点を解説します：思想からみるメタフレームワークの選び方 - メタフレームワークは「思想」で選ぶ www.codegrid.net/articles/202... #codegrid
0
0
0
0
【Tips】
JavaScriptでAPIから受け取った日本時間の日時を正しく扱うには、
ISO 8601形式で時差を明示しましょう⏰️
new Date('2025-11-01T18:00:00+09:00')
末尾に +09:00 を付けることで、タイムゾーン設定に関わらず
常にJST基準のUNIXタイムが生成されます💥
#codegrid #javascript
1
0
0
0
【Tips】
機能が拡張された、CSSの`attr()`を使うと、HTMLの属性値を「色」として扱えます🎨
div {
color: attr(data-color type(<color>), red);
}
data-color="blue" や data-color="#ff00b3" のように属性で色を指定でき、無効な値や属性なしのときはフォールバック値（`red`）が適用されます。
#codegrid #css
0
0
0
0
【最新記事】CodeGrid先週公開の3本はこちら！
🔸ターミナルを中心とした作業環境 Ghosttyとtmuxでターミナル環境を構築する
🔸文字組に関するCSSプロパティ 第6回 テキストの上下余白を制御するtext-boxプロパティ
🔸JSXで実装するUIライブラリに依存しないコンポーネント 最終回 単方向データフローとコンポーネント構成の実現
codegrid.net/issues/669/
#codegrid
0
0
0
0
【無料開放】
コードや文章を日々書いているエンジニアへ。AIエージェントを使い始めてから「絶対に活かした方が良い」と確信した筆者による体験談です✍️
ChatGPTによる検索力の置き換えから、Claude Codeでの並行作業まで——AIの使い方はここ数年で劇的に変化しています。あなたはどの段階にいますか？
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
2
0
0
0
【無料開放】
あなたのフォーム、知らないうちに利用者を困らせていませんか？😓
全角指定、パスワードのコピペ禁止、細かく分割された入力欄……開発側の都合が体験を壊している典型例です。
悪いフォームの「あるある」を知ることで、良い実装のヒントが見えてきます。
www.codegrid.net/articles/202...
#codegrid
📖 CodeGridは有料メディアですが、この記事は登録不要で無料で読めます
0
0
0
0
【Tips】
new Date(‘2025-11-01 18:00:00’) のように
タイムゾーン情報なしで Date を生成すると、OSのタイムゾーンに依存します🕰️
「2025-11-01 18:00:00 が日本時間」のつもりでも、
海外環境では現地時刻として解釈されます。
特定のタイムゾーン前提なら、必ず明示しましょう。
#codegrid
1
0
0
0
【本日公開】propsのバケツリレーを回避し、状態管理とレンダリングロジックをコンポーネント間で共有する方法を解説します：JSXで実装するUIライブラリに依存しないコンポーネント - 単方向データフローとコンポーネント構成の実現 www.codegrid.net/articles/202... #codegrid
0
0
0
0