Yuki Terashima y-temp4

Node.jsのTypeScriptサポートについて

Created: 2024-07-28

Node.jsのTypeScriptサポートに関する議論を時系列でまとめたものです。

Start

Issue: Support typescript with --experimental-strip-types · Issue #208 · nodejs/loaders

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Convert TypeScript library project to Node.js Dual Package

It is a script to convert a TypeScript library project to a Node.js Dual CommonJS/ES module packages.

This script aim to convert following project:

Use TypeScript
Use ts-node
Use mocha

結城浩とChatGPTの対話

2022年12月2日

「質問」は結城浩の文章です。
「回答」はChatGPTの文章です。

質問

ChatGPTという対話するAIツールがあります。人間が質問を投げかけるとそれらしく対話して回答してくれるツールです。こういうツールに対してどんな質問を投げかけたらおもしろい対話になるでしょうかね。何かアイディアがあったら聞かせてください。具体的な質問を知りたいなあ。

Playwrightメモ

GitHub Actions
Tips: lazy-loading
PCとモバイルで別々の設定でテストを分ける

放送で紹介する用。書きかけです。

ちょっと伸びたのでさらに追記。これは元々自分の勉強がてら書いていたもので、これを書く過程でどうしても自分の理解では説明できないところがあり koba789 に依頼してペアプロをしてもらった、という流れがあります。その結果が次の動画です。

https://t.co/FIBmVrR83U

生放送の流れを円滑にするために資料を公開しましたが、この記事は未完成で、あとでさらに整理して別途記事にまとめるつもりです

サブドメインをユーザーホスティングサイトに使うときのパターン

hoge.example.com でユーザが作成したサイトをホスティングして、任意のJavaScriptを実行できる状態にしたいケース。サブドメインを分けることで、Fetch APIなどはSame Origin Policyを基本にするため、別のサブドメインや example.com に対するリクエストなどはできなくなる。

一方で、CookieはSame Origin Policyではない。デフォルトでは、hoge.example.com から example.com に対するCookieが設定できる。これを利用したDoS(Cookie Bomb)やこの挙動を組み合わせた別の脆弱性に利用できる場合がある。

The Cookie Monster in Your Browsers - Speaker Deck

	// Turn all HTML <a> elements into client side router links, no special framework-specific <Link> component necessary!
	// Example using the Next.js App Router.
	import { useRouter } from 'next/navigation';
	import { useEffect } from 'react';

	function useLinkHandler() {
	let router = useRouter();

	useEffect(() => {
	let onClick = e => {

	://ranking.goo.ne.jp/
	://my-best.com/
	://sakidori.co/
	://wowma.jp/
	://osusume.mynavi.jp/
	://pc.moppy.jp/
	://heim.jp/
	://www.esquire.com/
	://epark.jp/
	://iecolle.com/

	import { Meta } from "@storybook/react/types-6-0";
	import { PostList } from "../PostList";
	import { getTRPCMock } from "../getTrpcMock";

	export default {
	title: "Components/PostList",
	component: PostList,
	} as Meta;

	export const PostListPage = () => {