ð¥ ä»é±ã®äž»èŠããŒã
- React Compilerã®RC段éãžã®ç§»è¡ãšæ§ã ãªããã³ããšã³ãããŒã«åã³æè¡ã®æ·±æãããããŠãã¶ã€ã³ã·ã¹ãã æ§ç¯ã®ããã®å®çšçãªæŠç¥ã«ã€ããŠèŠãŠãããŸãã
1. ð æ·±æã
-
- åºå ž: React Status #426
- èæ¯: ãµãŒããŒå°çšæ©èœãšã¯ã©ã€ã¢ã³ãå°çšæ©èœãæ··åšããããäžå¯èœã«èŠãããã³ã³ããŒãã³ãã®æŠå¿µã«é¢ããæ¢æ±ã§ããReact Server Components (RSC)ããã®ã®ã£ãããã©ã®ããã«åããããšãã§ãããã瀺ããŸããDan Abramovã¯ããµãŒããŒã§ã®ã¿å®è¡ãããã¹ãããžãã¯ïŒäŸïŒããŒã¿ããŒã¹ã¢ã¯ã»ã¹ããã¡ã€ã«ã·ã¹ãã 䜿çšïŒãšã¯ã©ã€ã¢ã³ãã§ã€ã³ã¿ã©ã¯ã·ã§ã³ãæ
åœããããžãã¯ïŒäŸïŒ
useState
ãuseEffect
ïŒãã©ã®ããã«äžç·ã«äœ¿çšã§ãããã«ã€ããŠã®ããžã§ã³ãæç€ºããŸãã - äž»ãªæ©èœ: RSCãæŽ»çšãããšãã³ã³ããŒãã³ãã®äžéšã¯ãµãŒããŒã§ã¬ã³ããªã³ã°ãããŠHTMLãšããŠéä¿¡ãããå¿ èŠãªã¯ã©ã€ã¢ã³ããµã€ãã®ã€ã³ã¿ã©ã¯ã·ã§ã³ã®ããã®JavaScriptã³ãŒãã®ã¿ãã¯ã©ã€ã¢ã³ãã«éä¿¡ãããŸããããã«ãããåæããŒãã£ã³ã°ããã©ãŒãã³ã¹ãæ¹åãããµãŒããŒãªãœãŒã¹ãå¹ççã«æŽ»çšã§ããŸãã
- ã³ãŒãäŸ: (Dan Abramovã®èšäºãšRSCã®æŠå¿µã«åºã¥ããäŸ)
ãµãŒããŒã³ã³ããŒãã³ã (ããŒã¿ãã§ããã³ã°åã³ãµãŒããŒããžãã¯æ åœ) ã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ã (ç¶æ 管çåã³ã€ã³ã¿ã©ã¯ã·ã§ã³æ åœ)// app/greeting-backend.js // 'use server'; // Next.js App Routerãªã©RSC察å¿ç°å¢ã§æç€º import { readFile } from 'fs/promises'; // ãµãŒããŒAPIã®äŸ import { GreetingFrontend } from './greeting-frontend'; export async function GreetingBackend() { const colorFromFile = await readFile('./my-settings/color.txt', 'utf8'); // ãµãŒããŒããããŒã¿ãååŸãŸãã¯åŠç return <GreetingFrontend initialColor={colorFromFile.trim()} />; }
// app/greeting-frontend.js 'use client'; import { useState, useEffect } from 'react'; export function GreetingFrontend({ initialColor }) { const [name, setName] = useState('Guest'); const [textColor, setTextColor] = useState(initialColor); useEffect(() => { // ã¯ã©ã€ã¢ã³ããµã€ãã§ã®ã¿å®è¡ãããããžã㯠console.log(`Color set to: ${textColor}`); }, [textColor]); return ( <div> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Enter your name" /> <p style={{ color: textColor }}>Hello, {name}!</p> <button onClick={() => setTextColor(textColor === initialColor ? 'deeppink' : initialColor)}> Toggle Color </button> </div> ); }
- å®åé©çš: è€éãªããŒã¿äŸåæ§ãæã€ã³ã³ããŒãã³ãããµãŒããŒãšã¯ã©ã€ã¢ã³ãã®ããžãã¯ã«åé¢ããŠãããå¹ççã«ç®¡çããåæããŒãã£ã³ã°ããã©ãŒãã³ã¹ãæ¹åãããå Žåã«æçšã§ããèªèšŒæ å ±ã®ãããªæ©å¯ããŒã¿ããµãŒããŒã³ã³ããŒãã³ãå ã§ã®ã¿æ±ãããšã§ãã»ãã¥ãªãã£ã匷åããããšãã§ããŸãã
- 泚æäºé : RSCã¯æ¯èŒçæ°ãããã©ãã€ã ã§ããããããã¬ãŒã ã¯ãŒã¯ïŒäŸïŒNext.js App RouterïŒã®ãµããŒãæ¹åŒãšãšã³ã·ã¹ãã ãããçè§£ããŠå°å ¥ããå¿ èŠããããŸãããµãŒããŒã³ã³ããŒãã³ããšã¯ã©ã€ã¢ã³ãã³ã³ããŒãã³ãéã®ããŒã¿äŒéæ¹åŒãç¶æ ç®¡çæŠç¥ã«ã€ããŠã®æ€èšãå¿ èŠã§ãã
-
A Flowing WebGL Gradient, Deconstructed
- ì¶ì²: Frontend Focus #689 (JavaScript Weekly #732ã«ãèšå)
- èæ¯: ãŠã§ãã§é åçãªãã©ãºãã¹ã¿ã€ã«ã®åçã°ã©ããŒã·ã§ã³å¹æãã¬ã³ããªã³ã°ããæ¹æ³ã«ã€ããŠã®è©³çŽ°ãªæ¢æ±ã§ããJavaScriptéçºè ã§ã容æã«çè§£ã§ããããã«ãGLSL (OpenGL Shading Language) ã³ãŒããšãã®åçã説æããŸãã
- äž»ãªæ©èœ: WebGLã䜿çšããŠãã£ã³ãã¹ã«ãã¯ã»ã«åäœã§è²ãå¶åŸ¡ãããã©ã°ã¡ã³ãã·ã§ãŒããŒãäœæããŸããæéçµéã§å€åããå€ïŒuniform倿°
u_time
ïŒãšãã¯ã»ã«ã®åº§æšïŒvarying倿°ãŸãã¯gl_FragCoord
ïŒã䜿çšããŠãæ°åŠé¢æ°ïŒsinãcosãmixãnoiseãªã©ïŒãçµã¿åãããå€åœ©ã§æµåçãªè²ãã¿ãŒã³ãäœãåºããŸãã - ã³ãŒãäŸ: (Alex Harriã®èšäºã§æç€ºãããã¢ã€ãã¢ã«åºã¥ããã©ã°ã¡ã³ãã·ã§ãŒããŒã®äŸ)
JavaScriptåŽã§ã¯ãã®ã·ã§ãŒããŒãããŒããã// Fragment Shader (GLSL) precision mediump float; uniform vec2 u_resolution; // ãã£ã³ãã¹è§£å床 (width, height) uniform float u_time; // æé (ã¢ãã¡ãŒã·ã§ã³çš) // 2D Simplex Noise 颿° (ç°¡ç¥åãããäŸãå®éã«ã¯ã©ã€ãã©ãªãŸãã¯è©³çްãªå®è£ ãå¿ èŠ) // ãã®é¢æ°ã¯èšäºã§çŽæ¥æäŸãããŠããŸããããã¢ã€ãã¢å®è£ ã®ããã«å¿ èŠã§ã float snoise(vec2 v) { // ... Simplex Noise å®è£ ... // ããã§ã¯ç°¡å㪠sin/cos ããŒã¹ã®ãã¿ãŒã³ã§ä»£æ¿ return (sin(v.x * 0.1 + u_time) + cos(v.y * 0.1 - u_time)) * 0.5 + 0.5; } void main() { vec2 st = gl_FragCoord.xy / u_resolution.xy; st.x *= u_resolution.x / u_resolution.y; // ç»é¢æ¯çè£æ£ float t = u_time * 0.3; // æéããŒã¹ã®å€æ° // è€æ°å±€ã®ãã€ãºïŒãŸãã¯æ°åŠé¢æ°ïŒãéããŠè€éãªãã¿ãŒã³ãçæ float f = 0.0; f += 0.50 * snoise(st * 2.0 + vec2(cos(t * 0.5), sin(t * 0.3))); f += 0.25 * snoise(st * 4.0 + vec2(sin(t * 0.4), cos(t * 0.6))); f += 0.125 * snoise(st * 8.0 - vec2(cos(t * 0.7), sin(t * 0.2))); f = pow(f, 1.5); // ã³ã³ãã©ã¹ãèª¿æŽ // ã«ã©ãŒãã¬ããå®çŸ©ãšæ··å vec3 colorA = vec3(0.8, 0.1, 0.4); // ãã³ã¯/ããŒãã«ç³» vec3 colorB = vec3(0.1, 0.4, 0.8); // ãã«ãŒç³» vec3 colorC = vec3(1.0, 0.8, 0.2); // ã€ãšããŒ/ãªã¬ã³ãžç³» vec3 color = mix(colorA, colorB, smoothstep(0.2, 0.5, f)); color = mix(color, colorC, smoothstep(0.4, 0.8, f + sin(st.x * 3.0 + t) * 0.1)); gl_FragColor = vec4(color, 1.0); }
u_resolution
ãšu_time
uniform倿°ãæ¯ãã¬ãŒã æŽæ°ããªããã¬ã³ããªã³ã°ããŸãã - å®åé©çš: ãŠã§ããµã€ãã®èæ¯ãã€ã³ã¿ã©ã¯ãã£ãã¢ãŒããããŒã¿å¯èŠåãã²ãŒã ã°ã©ãã£ãã¯ãªã©ãèŠèŠçã«è±ãã§æ²¡å ¥æã®ãããŠãŒã¶ãŒäœéšãæäŸãããå Žåã«æŽ»çšã§ããŸãã
- 泚æäºé : WebGLãšGLSLã¯GPUãªãœãŒã¹ã䜿çšãããããããã©ãŒãã³ã¹æé©åãéèŠã§ããè€éãªã·ã§ãŒããŒã¯ã¢ãã€ã«ããã€ã¹ãäœã¹ããã¯ã·ã¹ãã ã§ã¯ããã©ãŒãã³ã¹åé¡ãåŒãèµ·ããå¯èœæ§ããããŸãããããã°ãæ¯èŒçé£ããããã©ãŠã¶ã®äºææ§ãèæ ®ããå¿ èŠããããŸãã
èŠéããªãã³ã³ãã³ã
- Advanced React in the Wild (åºå
ž: JavaScript Weekly #732)
- ãŸãšã: 5ã€ã®ç°ãªããšã³ãžãã¢ãªã³ã°ããŒã ãæ¬çªç°å¢ã§Reactãæ¥µéãŸã§æŽ»çšããäºäŸç ç©¶éã§ããããã©ãŒãã³ã¹ãCore Web Vitalsããã£ãã·ã³ã°ãªã©ãå®éã®ç°å¢ã§ã®æåäºäŸãåãäžããŠããŸãã
- Next Steps for Privacy Sandbox and Tracking Protections in Chrome (åºå
ž: Frontend Focus #689)
- ãŸãšã: Chromeã«ããããµãŒãããŒãã£Cookie廿¢èšç»ã«é¢ããGoogleã®çŸåšã®ç«å Žã説æããŠããŸããçŸåšã®ã¢ãããŒããç¶æãããŠãŒã¶ãŒã«ã¯Chromeã®ãã©ã€ãã·ãŒãšã»ãã¥ãªãã£èšå®ã§éžææš©ãåŒãç¶ãæäŸãããšã®ããšã§ãã
2. ð ïž ããŒã« & ã©ã€ãã©ãª
-
Astro Font: An Astro Plugin to Automatically Optimize Your Fonts (åºå ž: Frontend Focus #689)
- æŠèŠ: Astroãããžã§ã¯ãã§ãã©ã³ãã®äœ¿çšãæé©åãããã©ã°ã€ã³ã§ããã«ã¹ã¿ã ãã©ã³ããããŒã«ã«ãã©ã³ããCDNçµç±ã®ãã©ã³ããGoogle Fontsãªã©ãæ§ã
ãªãã©ã³ããœãŒã¹ããµããŒãããèªåçã«ãã©ã³ããããŠã³ããŒãããŠ
font-face
ã«ãŒã«ãçæããããã©ãŒãã³ã¹ãåäžãããŸãã - äœ¿ãæ¹:
Astroèšå®ãã¡ã€ã« (npm install astro-font
astro.config.mjs
) ã«ãã©ã°ã€ã³ã远å ãããã©ã³ãèšå®ãè¡ããŸãã// astro.config.mjs import { defineConfig } from 'astro/config'; import astroFont from 'astro-font'; export default defineConfig({ integrations: [ astroFont({ src: [ { name: 'My Local Font', path: '/fonts/MyLocalFont.woff2', // publicãã£ã¬ã¯ããªåºæºã®ãã¹ weight: '400 700', // 400ãš700ã®2ã€ã®ãŠã§ã€ã style: 'normal', display: 'swap', // ãã©ã³ãèªã¿èŸŒã¿æŠç¥ preload: true, // éèŠãªãã©ã³ããäºåã«èªã¿èŸŒã }, { name: 'Google Font Example', // Google Fontsäœ¿çšæ google: 'Inter', variants: [ { weight: '400', style: 'normal' }, { weight: '700', style: 'italic' }, ], subsets: ['latin'], // 䜿çšããæåã»ãã }, ], }), ], });
- å®è·µã®ãã³ã:
preload
ãªãã·ã§ã³ã䜿çšããŠéèŠãªãã©ã³ããäºåã«èªã¿èŸŒãããšã§ãLCP (Largest Contentful Paint) ã®ãããªãŠã§ãããã©ãŒãã³ã¹ææšãæ¹åã§ããŸããdisplay: 'swap'
ãªã©ã®ãã©ã³ã衚瀺æŠç¥ãé©åã«äœ¿çšããŠãFOIT (Flash of Invisible Text) ãFOUT (Flash of Unstyled Text) ã管çããŠãã ããã
- æŠèŠ: Astroãããžã§ã¯ãã§ãã©ã³ãã®äœ¿çšãæé©åãããã©ã°ã€ã³ã§ããã«ã¹ã¿ã ãã©ã³ããããŒã«ã«ãã©ã³ããCDNçµç±ã®ãã©ã³ããGoogle Fontsãªã©ãæ§ã
ãªãã©ã³ããœãŒã¹ããµããŒãããèªåçã«ãã©ã³ããããŠã³ããŒãããŠ
-
Tailwind Trainer: A Game for Practicing Tailwind Utility Classes (åºå ž: Frontend Focus #689)
- æŠèŠ: Flexbox FroggyãšGrid Gardenã®éçºããŒã ãäœæããTailwind CSSãŠãŒãã£ãªãã£ã¯ã©ã¹ç·Žç¿çšã²ãŒã ã§ããã²ãŒã ãéããŠTailwindã®ææ³ãåŠã¶ããšãã§ãããã¬ã€ãããã³ã«ç°ãªãåé¡ãåºé¡ããããããå埩åŠç¿ã«åœ¹ç«ã¡ãŸãã
- äœ¿ãæ¹: ãŠã§ããµã€ãã«ã¢ã¯ã»ã¹ããŠã²ãŒã ããã¬ã€ããæç€ºããããã¶ã€ã³ãTailwind CSSãŠãŒãã£ãªãã£ã¯ã©ã¹ãçµã¿åãããŠå®æãããŸãã(CLIãã³ãŒãã®ã€ã³ã¹ããŒã«ã¯äžèŠ)
åé¡è§£æ±ºéçšã®äŸ (æŠå¿µç)<button class="bg-blue-500 text-white p-4 rounded">Click Me</button>
- å®è·µã®ãã³ã: åã«ã²ãŒã ãã¯ãªã¢ããã ãã§ãªããåãŠãŒãã£ãªãã£ã¯ã©ã¹ãå®éã«ã©ã®ãããªCSSããããã£ã«å€æãããããäžç·ã«èãããšãåŠç¿å¹æãæå€§éã«é«ããããšãã§ããŸããé »ç¹ã«äœ¿çšãããæ··ä¹±ããããã¯ã©ã¹ (äŸ: flexboxãgridé¢é£ã®ã¯ã©ã¹) ãé ακÏΌα緎ç¿ããã®ã«æŽ»çšãããšè¯ãã§ãããã
èŠéããªãã³ã³ãã³ã
- JSONMocker: A Web-Based Editor to Create Reusable JSON Mock Data Schema Files (åºå
ž: Frontend Focus #689)
- ãŸãšã: åå©çšå¯èœãªJSONã¢ãã¯ããŒã¿ã¹ããŒããã¡ã€ã«ãäœæã§ãããŠã§ãããŒã¹ã®ãšãã£ã¿ã§ããéçºåææ®µéã§APIã¬ã¹ãã³ã¹ãã·ãã¥ã¬ãŒããããããã¹ãããŒã¿ãçæãããããã®ã«åœ¹ç«ã¡ãŸãã
- Symbl: Easily Search, Copy, and Use HTML Symbols, Emojis & More (åºå
ž: Frontend Focus #689)
- ãŸãšã: HTMLã·ã³ãã«ãçµµæåãªã©ãç°¡åã«æ€çŽ¢ããŠã³ããŒããŠäœ¿çšã§ããããŒã«ã§ãããŠã§ãéçºæã«ç¹æ®æåãã¢ã€ã³ã³ãçŽ æ©ãèŠã€ããŠæŽ»çšããã®ã«åœ¹ç«ã¡ãŸãã
3. ð ããããèšäº & ããã
-
Minimal CSS-Only Blurry Image Placeholders (åºå ž: CSS Weekly #610)
- äž»èŠãªã€ã³ãµã€ã: ããŒã¯ã¢ãããè€éã«ããããšãªããCSSã®ã¿ã§ãŒãããç»åãã¬ãŒã¹ãã«ã㌠(LQIP - Low Quality Image Placeholders) ãäœæãããã¯ããã¯ãå
±æããŸãã
background-image
ãfilter: blur()
ãtransform: scale()
ãªã©ã®CSSããããã£ã掻çšããŠãå°ãããµã€ãºã®å ç»åãæ¡å€§ãããŒãããŠãã¬ãŒã¹ãã«ããŒãšããŠäœ¿çšããŸããããã¯ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåäžãããç»åãèªã¿èŸŒãŸãããŸã§ã®ã¬ã€ã¢ãŠã厩ããé²ãã®ã«åœ¹ç«ã¡ãŸãã - ã³ãŒãäŸ:
<div class="image-container"> <img src="high-quality-image.jpg" alt="Description" loading="lazy" class="actual-image" /> </div>
.image-container { position: relative; width: 300px; /* ãŸãã¯ä»»æã®ãµã€ãº */ aspect-ratio: 16/9; /* ç»åã®ã¢ã¹ãã¯ãæ¯ãç¶æ */ background-color: #eee; /* åºæ¬ã®èæ¯è² */ /* äœç»è³ªç»åã®URLãCSS倿°ãšããŠæå®ãããçŽæ¥äœ¿çš */ background-image: var(--low-quality-image-url); /* äŸ: url(low-quality-placeholder.jpg) */ background-size: cover; overflow: hidden; /* blur广ãã¯ã¿åºããªãããã« */ } .image-container::before { content: ''; position: absolute; inset: -5%; /* ãŒãã广ã®ç«¯ãåããã®ãé²ãããã®è¥å¹²ã®æ¡åŒµ */ background-image: inherit; /* ã³ã³ããã®èæ¯ç»åãç¶æ¿ */ background-size: cover; filter: blur(20px); /* ãŒãã广ã®åŒ·åºŠ */ /* transform: scale(1.1); // insetã§ä»£æ¿å¯èœ */ } .actual-image { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; /* ::beforeã®äžã«ããããã« */ opacity: 0; /* æåã¯éæã« */ transition: opacity 0.3s ease-in-out; /* æ»ãããªç»å Žå¹æ */ } /* JavaScriptã§ç»åèªã¿èŸŒã¿å®äºæã« .loaded ã¯ã©ã¹ã远å */ .actual-image.loaded { opacity: 1; }
- ãã®èšäºãæçãªçç±: JavaScriptãªãã§CSSã®ã¿ã§ç»åèªã¿èŸŒã¿æé©åãã¯ããã¯ãå®è£
ã§ãããããããã©ãŒãã³ã¹ãžã®åœ±é¿ãå°ãªãã§ã (ãã ããäžèšäŸã®
loaded
ã¯ã©ã¹ã®åãæ¿ãã¯JSãå¿ èŠ)ããŸããè€éãªHTMLæ§é ã®å€æŽãªãã«ã¹ã¿ã€ã«ã·ãŒãã®ä¿®æ£ã ãã§é©çšå¯èœã§ãããä¿å®ã容æã§ãã
- äž»èŠãªã€ã³ãµã€ã: ããŒã¯ã¢ãããè€éã«ããããšãªããCSSã®ã¿ã§ãŒãããç»åãã¬ãŒã¹ãã«ã㌠(LQIP - Low Quality Image Placeholders) ãäœæãããã¯ããã¯ãå
±æããŸãã
-
Organizing Layers And Artboards In Figma (åºå ž: Smashing Newsletter #504)
- äž»èŠãªã€ã³ãµã€ã: Figmaã§ã¬ã€ã€ãŒãšã¢ãŒãããŒãã广çã«æ§æã»ç®¡çããããã®å®çšçãªãã³ããšæŠç¥ãæäŸããŸããäžè²«ããåœåèŠåïŒäŸïŒ
component/variant/state
ïŒãã°ã«ãŒãåãšãã¬ãŒã ã®æŽ»çšïŒAuto Layoutã®ç©æ¥µçãªäœ¿çšïŒãããŒãžã䜿ã£ãäœæ¥é åã®åé¢ïŒäŸïŒExploration, Components, ArchiveïŒãªã©ãã³ã©ãã¬ãŒã·ã§ã³å¹çãé«ãããã¶ã€ã³ã·ã¹ãã ã®æ¡åŒµæ§ã確ä¿ããããã®æ¹æ³è«ãåãäžããŠããŸãã - ãã®èšäºãæçãªçç±: ãã¶ã€ããŒã ãã§ãªããFigmaãã¡ã€ã«ãæ±ãéçºè ã«ãšã£ãŠãæçšã§ããæŽçãããFigmaãã¡ã€ã«ã¯ããã¶ã€ã³ã®æå³ãæç¢ºã«äŒããCSSã¯ã©ã¹åãã³ã³ããŒãã³ãæ§é ãæšæž¬ããã®ã«åœ¹ç«ã¡ãéçºããã»ã¹ã§ã®æ··ä¹±ãæžããçç£æ§ãåäžãããŸãã
- äž»èŠãªã€ã³ãµã€ã: Figmaã§ã¬ã€ã€ãŒãšã¢ãŒãããŒãã广çã«æ§æã»ç®¡çããããã®å®çšçãªãã³ããšæŠç¥ãæäŸããŸããäžè²«ããåœåèŠåïŒäŸïŒ
-
Building Single Page Apps with SvelteKit (åºå ž: JavaScript Weekly #732)
- äž»èŠãªã€ã³ãµã€ã: SvelteKitã䜿çšããŠã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ (SPA) ãæ§ç¯ããæ¹æ³ã玹ä»ããŸããSvelteKitã®ã«ãŒãã£ã³ã°ãããŒã¿ããŒãã£ã³ã° (
load
颿°)ãã¬ã€ã¢ãŠãæ©èœã掻çšããŠãåŸæ¥ã®SPAã®ããã«åäœããããã«èšå®ããããã»ã¹ãæ¡å ããŸããããã«ãadapter-static
ã䜿çšããŠãŠã§ããµãŒããŒãªãã§å®è¡ã§ããåäžã®HTMLãã¡ã€ã«ãšããŠSvelteKitã¢ããªããã«ãããæ¹æ³ãŸã§åãäžããŠããã軜éã§é«éãªãããã¿ã€ãã³ã°ãç°¡åãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ã®ãããã€ã«åœ¹ç«ã¡ãŸãã(15åéã®ãã¥ãŒããªã¢ã«) - ã³ãŒãäŸ (æŠå¿µçãSvelteKitã«ãŒãã£ã³ã°åã³ããŒã颿°):
// src/routes/posts/+page.js (SvelteKitã®load颿°ã®äŸ) export async function load({ fetch }) { const response = await fetch('/api/posts'); // å éšAPIãŸãã¯å€éšAPIåŒã³åºã const posts = await response.json(); return { posts }; }
<script> export let data; // load颿°ããè¿ãããããŒã¿ </script> <h1>Blog Posts</h1> <ul> {#each data.posts as post} <li><a href="/posts/{post.id}">{post.title}</a></li> {/each} </ul>
- ãã®èšäºãæçãªçç±: SvelteKitã®æè»æ§ãšåŒ·åãã瀺ããåŸæ¥ã®SPAéçºæ¹åŒä»¥å€ã«æ°ããã¢ãããŒããæç€ºããŸããç¹ã«éçãµã€ããç°¡åãªã€ã³ã¿ã©ã¯ã·ã§ã³ãå«ãããŒãžãè¿
éãã€å¹ççã«äœæãããéçºè
ã«ãšã£ãŠãè¯ãã¬ã€ããšãªãã§ãããã
adapter-static
ã«ãããã«ãã¯ãGitHub Pagesãªã©ã®éçãã¹ãã£ã³ã°ç°å¢ãžç°¡åã«ãããã€ã§ããããã«ããŸãã
- äž»èŠãªã€ã³ãµã€ã: SvelteKitã䜿çšããŠã·ã³ã°ã«ããŒãžã¢ããªã±ãŒã·ã§ã³ (SPA) ãæ§ç¯ããæ¹æ³ã玹ä»ããŸããSvelteKitã®ã«ãŒãã£ã³ã°ãããŒã¿ããŒãã£ã³ã° (
èŠéããªãã³ã³ãã³ã
- Using Manim For Making UI Animations (åºå
ž: Smashing Newsletter #504)
- ãŸãšã: æ°åŠã¢ãã¡ãŒã·ã§ã³ã§æåãªPythonã©ã€ãã©ãªManimã䜿çšããŠUIã¢ãã¡ãŒã·ã§ã³ãäœæããæ¹æ³ãæ¢æ±ããŸããã³ãŒãããŒã¹ã§ç²Ÿå·§ãã€ããã°ã©ããã£ãã¯ãªã¢ãã¡ãŒã·ã§ã³ãå¶äœãããéçºè ããã¶ã€ããŒã«æ°ããããŒã«ãæç€ºããç¹ã«è€éãªç¶æ å€åãããŒã¿é§ååã¢ãã¡ãŒã·ã§ã³ã«åœ¹ç«ã€å¯èœæ§ããããŸãã
- A design systems playbook for product teams (åºå
ž: Smashing Newsletter #504)
- ãŸãšã: 補åããŒã åãã®ãã¶ã€ã³ã·ã¹ãã ãã¬ã€ããã¯ã§ããã¶ã€ã³ã·ã¹ãã ãæåè£ã«æ§ç¯ã»ç¶æç®¡çããããŒã å šäœã«å¹æçã«æ®åãããããã®ã¬ã€ãã©ã€ã³ãšãã¹ããã©ã¯ãã£ã¹ãæäŸããŸããååå®çŸ©ãã³ã³ããŒãã³ãèšèšãããã¥ã¡ã³ããŒã·ã§ã³ãã¬ããã³ã¹ãªã©ããã¶ã€ã³ã·ã¹ãã éçšã®å šè¬çãªããã»ã¹ãåãäžããŠããŸãã
4. âš ã¢ã€ãã¢
-
CSS Hell (åºå ž: Frontend Focus #689)
- ç¹åŸŽ: CSSããããã£ã倿ŽããŠç¹å®ã®åºæºïŒäžãããã圢ç¶ãšäžèŽãããïŒãæºããå¿ èŠãããCSSããŒã¹ã®ããºã«ã²ãŒã ã§ããåèš15åã®ãã£ã¬ã³ãžããããåãã£ã¬ã³ãžã¯HTMLæ§é ãåºå®ãããç¶æ ã§CSSã®ã¿ã§ç®æšãéæããå¿ èŠããããŸããããªãé£æåºŠãé«ããCSSã»ã¬ã¯ã¿ãããã¯ã¹ã¢ãã«ãã¬ã€ã¢ãŠããå€åœ¢ãªã©ãããŸããŸãªCSSç¥èãèŠæ±ãããŸããè¡ãè©°ãŸã£ãå Žåã«åããŠããªããžããªã«æå³ããã解決çãæäŸãããŠããŸãã(ã¢ãã€ã«ç°å¢ã§ã¯ãã¬ã€ãã¹ã ãŒãºã§ãªãå ŽåããããŸãã) CSSã®ç¥èããã¹ãããæ°ããè§£æ±ºæ¹æ³ãæ¢æ±ããæ¥œãããæäŸããŸãã
-
Text Circle Animation (CSS Only) (åºå ž: CSS Weekly #610)
- ç¹åŸŽ: Stijn Van MinnebruggenãäœæãããCSSã®ã¿ã䜿çšããé©ãã¹ãã€ã³ã¿ã©ã¯ãã£ããã¢ã§ããè€æ°ã®ããã¹ãèŠçŽ ãå圢ã«é
眮ãããããããç°ãªãéåºŠãšæ¹åã§å転ããã¢ãã¡ãŒã·ã§ã³ã衚瀺ããCSSã®
clip-path
ãtransform
ã@property
(Houdini) ãªã©ãåµé çã«æŽ»çšããŠããŸããããŠã¹ã€ã³ã¿ã©ã¯ã·ã§ã³ã«å¿ããŠã¢ãã¡ãŒã·ã§ã³ãå€åãããªã©ãCSSã ãã§ãè±ããªèŠèŠäœéšãçã¿åºããããšã瀺ããŠããŸããç¹ã«@property
ãå©çšããã«ã¹ã¿ã ããããã£ã¢ãã¡ãŒã·ã§ã³ãå°è±¡çã§ãã
- ç¹åŸŽ: Stijn Van MinnebruggenãäœæãããCSSã®ã¿ã䜿çšããé©ãã¹ãã€ã³ã¿ã©ã¯ãã£ããã¢ã§ããè€æ°ã®ããã¹ãèŠçŽ ãå圢ã«é
眮ãããããããç°ãªãéåºŠãšæ¹åã§å転ããã¢ãã¡ãŒã·ã§ã³ã衚瀺ããCSSã®
5. â¡ïž ããããŒã
- The ECMAScript Records and Tuples Proposal Has Been Withdrawn (åºå
ž: JavaScript Weekly #732)
- ãŸãšã: é·å¹ŽéçºãããŠããJavaScriptã®ã¬ã³ãŒãïŒãªããžã§ã¯ãã«äŒŒãäžå€ããŒã¿æ§é ïŒããã³ã¿ãã«ïŒé åã«äŒŒãäžå€ããŒã¿æ§é ïŒææ¡ããæè¿ã®TC39äŒè°ã§åæã«è³ããæ€åãããŸãããäžæ¹ãJavaScriptã«åæå(enum)ãå°å ¥ããææ¡ã¯ã¹ããŒãž1ã«ãDeferred re-exportsææ¡ã¯ã¹ããŒãž2ã«é²ã¿ãŸããã
- How I Track My Blog's Analytics with Val Town (åºå
ž: JavaScript Weekly #732 / React Status #426ã«ãèšå)
- ãŸãšã: Orestis PapadopoulosããJavaScript/TypeScriptããŒã¹ã®ãµãŒããŒã¬ã¹ã¹ã¯ãªããã£ã³ã°ãã©ãããã©ãŒã ã§ããVal Townã䜿çšããŠãèªèº«ã®ããã°ã®åºæ¬çãªåææ©èœïŒããŒãžãã¥ãŒåéãªã©ïŒãè¿ éã«æ§ç¯ããæ¹æ³ãå ±æããŠããŸããå¥éãµãŒããŒãããŒã¿ããŒã¹ã®èšå®ãªãã«ãç°¡åãªHTTPãšã³ããã€ã³ããäœæããŠããŒã¿ãèšé²ããäºäŸã§ãã
- Deploying TypeScript: Recent Advances and Possible Future Directions (åºå
ž: JavaScript Weekly #732)
- ãŸãšã: Dr. Axel RauschmayerããTypeScriptãããã€ã¡ã³ãã®æè¿ã®é²å±ãšä»åŸã®å¯èœæ§ã«ã€ããŠè«ããŠããŸããswcãesbuildãšãã£ãé«éã³ã³ãã€ã©ã®ç»å Žã
tsc --build
ã¢ãŒãã®æ¹åããããŠDenoãBunã®ããã«TypeScriptããã€ãã£ãã«ãµããŒãããã©ã³ã¿ã€ã ç°å¢ã§ã®ãããã€æŠç¥ãªã©ãåãäžããŠããŸãã
- ãŸãšã: Dr. Axel RauschmayerããTypeScriptãããã€ã¡ã³ãã®æè¿ã®é²å±ãšä»åŸã®å¯èœæ§ã«ã€ããŠè«ããŠããŸããswcãesbuildãšãã£ãé«éã³ã³ãã€ã©ã®ç»å Žã
- Zero-Config Debugging with Deno and OpenTelemetry (åºå
ž: JavaScript Weekly #732)
- ãŸãšã: Denoã©ã³ã¿ã€ã ãšOpenTelemetryïŒåæ£ãã¬ãŒã·ã³ã°æšæºïŒã掻çšããŠãå¥éèšå®ãªãã«ãããã°åã³ã¢ããªã±ãŒã·ã§ã³ç£èŠãè¡ãæ¹æ³ã玹ä»ããŠããŸããDenoã®å èµOpenTelemetryãµããŒãã«ãããHTTPãªã¯ãšã¹ããããŒã¿ããŒã¹ã¯ãšãªãªã©ãèªåçã«è¿œè·¡ããå¯èŠåã§ããŸãã
- The Microsoft Edge team is proposing enhancing the
console.context()
method (åºå ž: React Status #426)- ãŸãšã: Microsoft EdgeããŒã ããéçºè
ããŒã«ã®
console.context()
ã¡ãœãããæ¹åããã³ã³ãœãŒã«ãã°ã«èŠèŠì ìžã³ã³ããã¹ãïŒäŸïŒèæ¯è²ãã¢ã€ã³ã³ïŒã远å ããããã«åºã¥ããŠãã£ã«ã¿ãªã³ã°ã§ããæ©èœãææ¡ããŠããŸããããã¯ãè€éãªã¢ããªã±ãŒã·ã§ã³ã§ãã°ãããç°¡åã«åºå¥ã管çããã®ã«åœ¹ç«ã€å¯èœæ§ããããŸãã
- ãŸãšã: Microsoft EdgeããŒã ããéçºè
ããŒã«ã®
6. ð ãªãªãŒã¹
- React Compiler RC (React Status #426)
- ã¢ããããŒã: React CompilerãRC段éã«å ¥ããå®éšçãªswcãµããŒããå«ã¿ãŸãã
- pnpm 10.9 (React Status #426)
- ã¢ããããŒã: JSRããã±ãŒãžã®ã€ã³ã¹ããŒã«ããµããŒãããŸãã
- React Suite 5.80 (React Status #426)
- ã¢ããããŒã: UIã³ã³ããŒãã³ãéã®ã¢ããããŒãã
- React Uploady 1.10 (React Status #426)
- ã¢ããããŒã: ãã¡ã€ã«ã¢ããããŒãã³ã³ããŒãã³ãåã³ããã¯ã®ã¢ããããŒãã
- Enums to JavaScript (Stage 1) (JavaScript Weekly #732)
- ã¢ããããŒã: JavaScriptã«åæå(enum)ãå°å ¥ããææ¡ãTC39ã§ã¹ããŒãž1ã«é²ã¿ãŸããã
- Deferred re-exports (Stage 2) (JavaScript Weekly #732)
- ã¢ããããŒã: Deferred re-exportsææ¡ãTC39ã§ã¹ããŒãž2ã«é²ã¿ãŸããã
(ãªãªãŒã¹åºæºãå³å¯ã«ãœãããŠã§ã¢ã®ããŒãžã§ã³ã¢ããããŒãã«é©çšããå Žå4ä»¶ãTC39ææ¡ã®é²æç¶æ³ãå«ãããš6件確ä¿ãæå°10ä»¶ã®åºæºã«ã¯æºããªããã®ã®ãæäŸããããã¥ãŒã¹ã¬ã¿ãŒå ã§æç¢ºãªããªãªãŒã¹ããšå€æã§ããé ç®ãéå®çã§ãããæ¬ èœé²æ¢ã®ããåãã¥ãŒã¹ã¬ã¿ãŒãæ¢çŽ¢ããŸãããã远å ã®ãœãããŠã§ã¢ããŒãžã§ã³ãªãªãŒã¹ã¯èŠã€ãããŸããã§ããã)
âïž ãããã«
- ä»é±ã¯ãReact Compilerã®éèŠãªé²å±ã®ãã¥ãŒã¹ãšå ±ã«ãWebGLãæŽ»çšããèŠèŠå¹æã®å®è£ ãSvelteKit SPAã®æ§ç¯ãFigmaãã¶ã€ã³ã®æŽçæ³ãªã©ãéçºåã³ãã¶ã€ã³ã®çç£æ§ãé«ããããšãã§ããæ§ã ãªæè¡ãšãã³ãã玹ä»ãããŸããããŸããJavaScriptã®æ°ããææ¡ã®é²æç¶æ³ãããã©ã€ãã·ãŒä¿è·ã«é¢ããChromeã®ç«å Žã®å€åãæ³šç®ãã¹ããã¥ãŒã¹ã§ãããããã³ããšã³ãéçºè ãšãã¶ã€ããŒåæ¹ã«ãšã£ãŠæçãªæ å ±ãæºèŒã®äžé±éã§ããã