Frontend Weekly 2025-05-30

1
div {
2
  color: var(--color);
3
  background-color: if(style(--color: white): black; else: white);
4
}
5

6
.dark {
7
  --color: black;
8
}
9
.light {
10
  --color: white;
11
}

1
.grid-container {
2
  reading-flow: grid-rows;
3
}
4

5
.item {
6
  reading-order: 2;
7
}

1
// C言語でのFibonacci計算（Promise経由で加算）
2
long promiseFib(long x) {
3
  if (x == 0) return 0;
4
  if (x == 1) return 1;
5
  return promiseAdd(promiseFib(x - 1), promiseFib(x - 2));
6
}
7

8
// JavaScriptのPromiseを呼び出し
9
EM_ASYNC_JS(long, promiseAdd, (long x, long y), {
10
  return Promise.resolve(x + y);
11
});

1
// サイトA (a.com) がBlob URLを作成
2
const blob = new Blob(["データ"], { type: "text/plain" });
3
const blobUrl = URL.createObjectURL(blob);
4

5
// サイトB (b.com) のiframeでは同じBlob URLにアクセス不可

1
import { signal, computed, effect } from "@angular/core";
2

3
@Component({
4
  template: `{{ fullName() }}`,
5
})
6
export class UserComponent {
7
  firstName = signal("John");
8
  lastName = signal("Doe");
9
  fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
10

11
  constructor() {
12
    effect(() => console.log("Name changed:", this.fullName()));
13
  }
14
}

1
import {
2
  provideZonelessChangeDetection,
3
  provideBrowserGlobalErrorListeners,
4
} from "@angular/core";
5

6
bootstrapApplication(AppComponent, {
7
  providers: [
8
    provideZonelessChangeDetection(),
9
    provideBrowserGlobalErrorListeners(),
10
  ],
11
});

1
const userResource = httpResource<User>(
2
  () => `https://api.example.com/users/${this.userId()}`
3
);
4

5
// テンプレートで直接使用
6
@Component({
7
  template: `{{ userResource.value() | json }}`,
8
})
9
export class UserProfile {}

1
// DevToolsでAngularプロファイリングを有効化
2
ng.enableProfiling();