// Svelteコンポーネントの例
<script lang="ts">
  let count = 0;

  function handleClick() {
    count += 1;
  }
</script>

<button on:click={handleClick}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

import { z } from "zod";

const User = z.object({
  username: z.string(),
});

User.parse({ username: "Ludwig" });

type User = z.infer<typeof User>;
// { username: string }

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import { AppRouter } from "./server";

const trpc = createTRPCProxyClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "http://localhost:3000",
    }),
  ],
});

async function main() {
  const res = await trpc.greeting.query({ name: "John" });
  console.log(res); // `Hello John`
}

main();

// ファイル名: .eslintrc.json
{
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true,
    "node": true
  }
}

// ファイル名: .prettierrc.json
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

npm create vite@latest

# Romeのインストール
$ npm install rome

# チェックの実行
$ npx rome check .

# フォーマットの実行
$ npx rome format .

# パッケージのインストール
npm install <package-name>

# パッケージの更新
npm update <package-name>

# パッケージの削除
npm uninstall <package-name>

# パッケージのインストール
yarn add <package-name>

# パッケージの更新
yarn upgrade <package-name>

# パッケージの削除
yarn remove <package-name>

# Bunのインストール
curl -fsSL https://bun.sh/install | bash

# Bunでのコードの実行
bun index.tsx

// Example of a test with Vitest
import { test } from "vitest";

test("basic", () => {
  // Your test code here
});

npm init playwright@latest

// ファイル名: SimpleComponent.test.tsx
import React from "react";
import { render } from "@testing-library/react";
import SimpleComponent from "./SimpleComponent";

test("renders learn react link", () => {
  const { getByText } = render(<SimpleComponent message="Test message" />);
  const linkElement = getByText(/Test message/i);
  expect(linkElement).toBeInTheDocument();
});

// ファイル名: SimpleComponent.test.tsx
import React from "react";
import { render, screen } from "@testing-library/react";
import SimpleComponent from "./SimpleComponent";

test("renders learn react link", () => {
  render(<SimpleComponent message="Test message" />);
  const linkElement = screen.getByText(/Test message/i);
  expect(linkElement).toBeInTheDocument();
});

// ファイル名: StyledComponent.tsx
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import React from "react";

type Props = {
  color: string;
};

const StyledComponent = ({ color }: Props) => {
  return (
    <div
      css={css`
        color: ${color};
      `}
    >
      This is a styled component.
    </div>
  );
};

export default StyledComponent;

// ファイル名: StyledComponent.tsx
import styled from "styled-components";
import React from "react";

type Props = {
  color: string;
};

const StyledDiv = styled.div<Props>`
  color: ${(props) => props.color};
`;

const StyledComponent = ({ color }: Props) => {
  return <StyledDiv color={color}>This is a styled component.</StyledDiv>;
};

export default StyledComponent;

npm create tauri-app@latest

// ファイル名: SimpleComponent.tsx
import React from "react";

type Props = {
  message: string;
};

const SimpleComponent = ({ message }: Props) => {
  return <div>{message}</div>;
};

export default SimpleComponent;

import { useData } from 'nextra/data'

export const getStaticProps = ({ params }) => {
  return fetch(`https://api.github.com/repos/shuding/nextra`)
    .then(res => res.json())
    .then(repo => ({
      props: {
        ssg: {
          stars: repo.stargazers_count
        }
      },
      revalidate: 60
    }))
}

export const Stars = () => {
  const { stars } = useData()
  return <strong>{stars}</strong>
}

Nextra has <Stars /> stars on GitHub!

// ファイル名: src/pages/index.astro
---
import SimpleComponent from '../components/SimpleComponent.astro';
---

<h1>Welcome to My Website!</h1>
<SimpleComponent message="This is a simple message." />

// ファイル名: src/pages/index.tsx
import React from "react";
import SimpleComponent from "../components/SimpleComponent";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My Website!</h1>
      <SimpleComponent message="This is a simple message." />
    </div>
  );
};

export default HomePage;

// ファイル名: pages/index.tsx
import React from "react";
import SimpleComponent from "../components/SimpleComponent";

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to My Website!</h1>
      <SimpleComponent message="This is a simple message." />
    </div>
  );
};

export default HomePage;

// Three.jsの基本的な使用例
import * as THREE from "three";

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.z = 5;

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ジオメトリの作成
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

// ファイル名: ComponentWithCssModule.tsx
import React from "react";
import styles from "./ComponentWithCssModule.module.css";

const ComponentWithCssModule = () => {
  return (
    <div className={styles.container}>This is a component with CSS Module.</div>
  );
};

export default ComponentWithCssModule;

<!-- ファイル名: ComponentWithTailwind.html -->
<div
  class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4"
>
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

import * as React from "react";
import { Tooltip } from "@radix-ui/react-tooltip";
import { styled } from "@emotion/react";

// Add styles with your preferred CSS technology
const StyledTooltipContent = styled(Tooltip.Content, {
  backgroundColor: "black",
  color: "white",
  borderRadius: "3px",
  padding: "5px",
});

type Props = {
  children: React.ReactNode;
  label: string;
};

const TooltipComponent = ({ children, label }: Props) => {
  return (
    <Tooltip>
      <Tooltip.Trigger>{children}</Tooltip.Trigger>
      <StyledTooltipContent sideOffset={5}>{label}</StyledTooltipContent>
    </Tooltip>
  );
};

export default TooltipComponent;

import { Disclosure } from "@headlessui/react";

function Example() {
  return (
    <Disclosure>
      {({ open }) => (
        <>
          <Disclosure.Button>Open Panel</Disclosure.Button>
          <Disclosure.Panel>
            {open ? "Panel is open" : "Panel is closed"}
          </Disclosure.Panel>
        </>
      )}
    </Disclosure>
  );
}

// ファイル名: ChakraComponent.tsx
import { Box, Button } from "@chakra-ui/react";
import React from "react";

const ChakraComponent = () => {
  return (
    <Box padding="4" bg="gray.100">
      <Button colorScheme="teal">Chakra Button</Button>
    </Box>
  );
};

export default ChakraComponent;

// ファイル名: AntComponent.tsx
import { Button } from "antd";
import React from "react";

const AntComponent = () => {
  return <Button type="primary">Ant Button</Button>;
};

export default AntComponent;

// ファイル名: AtomicComponent.tsx
import React from "react";

// Atoms
const Label = ({ text }: { text: string }) => <label>{text}</label>;
const Input = ({
  value,
  onChange,
}: {
  value: string;
  onChange: (value: string) => void;
}) => <input value={value} onChange={(e) => onChange(e.target.value)} />;

// Molecules
const LabeledInput = ({
  labelText,
  inputValue,
  onInputChange,
}: {
  labelText: string;
  inputValue: string;
  onInputChange: (value: string) => void;
}) => (
  <div>
    <Label text={labelText} />
    <Input value={inputValue} onChange={onInputChange} />
  </div>
);

// Organisms, Templates, Pages are composed of Molecules and Atoms

npm install ladle --save-dev
ladle

// ファイル名: Button.stories.tsx
import React from "react";
import { Story, Meta } from "@storybook/react/types-6-0";
import Button, { ButtonProps } from "./Button";

export default {
  title: "Example/Button",
  component: Button,
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: "Button",
};

# Vercel CLIをインストール
npm i -g vercel

# プロジェクトのディレクトリに移動
cd my-project

# デプロイ
vercel

# AWS CLIをインストール
pip install awscli

# AWSの認証情報を設定
aws configure

# バケットにファイルをアップロード
aws s3 cp index.html s3://my-bucket

// ファイル名: PrismaExample.ts
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

async function main() {
  const allUsers = await prisma.user.findMany();
  console.log(allUsers);
}

main()
  .catch((e) => {
    throw e;
  })
  .finally(async () => {
    await prisma.$disconnect();
  });

# PlanetScale CLIをインストール
curl -L https://github.com/planetscale/cli/releases/latest/download/pscale-cli-darwin-amd64 -o /usr/local/bin/pscale
chmod +x /usr/local/bin/pscale

# PlanetScaleにログイン
pscale auth login

# データベースに接続
pscale connect my-database main

import { createClient } from "@supabase/supabase-js";

// Initialize
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;
const supabase = createClient(supabaseUrl, supabaseKey);

// Create a new user
const { user, error } = await supabase.auth.signUpWithPassword({
  email: "example@email.com",
  password: "example-password",
});

// Next.jsでのAuth.jsの使用例
// /pages/api/auth/[...nextauth].ts
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Facebook from "next-auth/providers/facebook";
import Google from "next-auth/providers/google";

export default NextAuth({
  providers: [
    GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET,
    }),
    Facebook({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: process.env.FACEBOOK_SECRET,
    }),
    Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
});

// ファイル名: Auth0Component.tsx
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

const Auth0Component = () => {
  const { loginWithRedirect, logout, user, isAuthenticated } = useAuth0();

  return (
    <div>
      {!isAuthenticated && (
        <button onClick={() => loginWithRedirect()}>Log In</button>
      )}
      {isAuthenticated && <button onClick={() => logout()}>Log Out</button>}
      {isAuthenticated && <p>Welcome, {user.name}</p>}
    </div>
  );
};

export default Auth0Component;

// ファイル名: HookFormComponent.tsx
import React from "react";
import { useForm } from "react-hook-form";

type FormData = {
  firstName: string;
  lastName: string;
};

const HookFormComponent = () => {
  const { register, handleSubmit } = useForm<FormData>();
  const onSubmit = (data: FormData) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First name" />
      <input {...register("lastName")} placeholder="Last name" />
      <button type="submit">Submit</button>
    </form>
  );
};

export default HookFormComponent;

// app/api/send/route.ts
import { EmailTemplate } from "../../../components/EmailTemplate";
import { NextResponse } from "next/server";
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  try {
    const data = await resend.emails.send({
      from: "Acme <onboarding@resend.dev>",
      to: ["delivered@resend.dev"],
      subject: "Hello world",
      react: EmailTemplate({ firstName: "John" }),
    });

    return NextResponse.json(data);
  } catch (error) {
    return NextResponse.json({ error });
  }
}

# リモートリポジトリを追加
git remote add origin https://github.com/user/repo.git

# ローカルの変更をリモートリポジトリにプッシュ
git push -u origin master

# ファイル名: .github/workflows/main.yml
name: CI

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Run a one-line script
        run: echo Hello, world!

# ファイル名: .circleci/config.yml
version: 2.1
jobs:
  build:
    docker:
      - image: circleci/node:10
    steps:
      - checkout
      - run: echo "Hello, CircleCI!"

// ファイル名: graphqlServer.ts
import { ApolloServer, gql } from "apollo-server";

const typeDefs = gql`
  type Query {
    hello: String
  }
`;

const resolvers = {
  Query: {
    hello: () => "Hello, world!",
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

// ファイル名: restServer.js
const express = require("express");
const app = express();
const port = 3000;

app.get("/", (req, res) => {
  res.send("Hello, world!");
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

// ファイル名: ApolloClientComponent.tsx
import React from "react";
import {
  ApolloProvider,
  ApolloClient,
  InMemoryCache,
  gql,
  useQuery,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https://48p1r2roz4.sse.codesandbox.io",
  cache: new InMemoryCache(),
});

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = () => {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.dogs.map((dog) => (
        <div key={dog.id}>
          <p>{dog.breed}</p>
        </div>
      ))}
    </div>
  );
};

const ApolloClientComponent = () => (
  <ApolloProvider client={client}>
    <Dogs />
  </ApolloProvider>
);

export default ApolloClientComponent;

// ファイル名: axiosExample.tsx
import React, { useEffect, useState } from "react";
import axios from "axios";

const AxiosExample = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios("https://api.example.com/data");
      setData(result.data);
    };

    fetchData();
  }, []);

  return <div>{data ? data : "Loading..."}</div>;
};

export default AxiosExample;

// ファイル名: ApolloClientExample.tsx
import React from "react";
import {
  ApolloProvider,
  ApolloClient,
  InMemoryCache,
  gql,
  useQuery,
} from "@apollo/client";

const client = new ApolloClient({
  uri: "https:XXXX",
  cache: new InMemoryCache(),
});

const GET_DOGS = gql`
  query GetDogs {
    dogs {
      id
      breed
    }
  }
`;

const Dogs = () => {
  const { loading, error, data } = useQuery(GET_DOGS);

  if (loading) return "Loading...";
  if (error) return `Error! ${error.message}`;

  return (
    <div>
      {data.dogs.map((dog) => (
        <div key={dog.id}>
          <p>{dog.breed}</p>
        </div>
      ))}
    </div>
  );
};

const ApolloClientExample = () => (
  <ApolloProvider client={client}>
    <Dogs />
  </ApolloProvider>
);

export default ApolloClientExample;