Web関連¶

asdf global <lang-name> <version>

asdf uninstall <lang-name> <version>

asdf list <lang-name>

asdf install <lang-name> <version>
asdf install nodejs 16.17.0
asdf install nodejs 18.12.0

asdf local <lang-name> <version>
asdf local nodejs 16.17.0
asdf local nodejs 20.7.0

    <style>
      body {
        background-color: #00ff00
      }
    </style>

#sp-fixed-menu{
   position: fixed;
   width: 100%;
   bottom: 0px;
   z-index: 99;
   backgroundColor: white;
}

    <link rel="stylesheet" href="https://cdn.simplecss.org/simple-v1.css">

.shortcut {
    width: 300px; /* 要素の横幅を指定 */
    white-space: nowrap; /* 横幅のMAXに達しても改行しない */
    overflow: hidden; /* ハミ出した部分を隠す */
    text-overflow: ellipsis; /* 「…」と省略 */
}

margin: auto

final int i = 0;
i = 2; // Error(再代入不可)
final List<int> a = [1,2,3];
a[0] = 4; // OK(指す先は変更可能)

const int i = 0;
i = 2; // Error(再代入不可)
const List<int> a = [1,2,3]; // OK ※1
const List<int> b = const [1,2,3]; // OK(const値)
b[0] = 4; // コンパイルエラー(指す先も変更不可)

protected $except = [
        '/api/*'
];

const express = require('express')
const cors = require('cors')
const app = express()

app.use(cors())

app.get('/user/:userId', function (req, res, next) {
  res.json({result: '任意のオリジンからすべてのAPIがアクセスOK'})
})

"rules": {
    "@typescript-eslint/no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_",
        "caughtErrorsIgnorePattern": "^_",
        "destructuredArrayIgnorePattern": "^_"
      }
    ]
  },

{
  "scripts": {
    "build": "tsc --build",
    "clean": "tsc --build --clean",
    "start": "yarn build; node dist/server.js"
  }
}

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "outDir": "dist"
  },
  "include": [
    "**/*"
  ]
}

app.listen(
  {
    port: Number(process.env.PORT) || 3000,
    host: process.env.HOST || '0.0.0.0', // ここも入れる
  },
  (err) => {
    if (err) {
      console.error(err);
      process.exit(1);
    }
  }
);

firebase functions:config:get > functions/.runtimeconfig.json

const functions = require('firebase-functions');

exports.printenvSlack = functions.https.onRequest( (req, res) => {
  const config = functions.config();
  if( config.slack && config.slack.apikey ){
    res.send( config.slack.apikey );
  }
  else{
    res.send("Not Found Config");
  }
});

setPersistence(auth, browserLocalPersistence).then(() => {
  return signInWithEmailAndPassword(auth, email, password)
    .then((res) => {
      const user = res.user;
      setLoginUser(user);
      setLoginErrorMessage("");
    }).catch((error) => {
      setLoginErrorMessage(`${error.code}: ${error.errorMessage}`);
    });
}).catch((error) => {
  setLoginErrorMessage(`${error.code}: ${error.errorMessage}`);
});

firebase emulators:start

firebase login:use someuser@example.com

yarn firebase init

firebase login            # 必要に応じてアカウント変更
firebase projects:list    # 変更したいプロジェクトIDの確認
firebase use <project-id> # 変更コマンド

firebase login:list

firebase login:add

npm install husky --save-dev
npx husky install

  "scripts": {
    "prepare": "husky install"
  }

(async function (ms) { await new Promise(s => setTimeout(s, ms)) })(3000);

const users = [
  {
    name: 'Patty Rabbit',
    address: {
      town: 'Maple Town',
    },
  },
  {
    name: 'Rolley Cocker',
    address: {},
  },
  null,
];
for (const u of users) {
  const user = u ?? { name: '(Somebody)' };
  const town = user?.address?.town ?? '(Somewhere)';
  console.log(`${user.name} lives in ${town}`);
}

// Patty Rabbit lives in Maple Town
// Rolley Cocker lives in (Somewhere)
// (Somebody) lives in (Somewhere)

const user = {
  id: 3,
  name: 'Bobby Kumanov', username: 'bobby',
  email: 'bobby@maple.town',
};

console.log(Object.keys(user));
// [ 'id', 'name', 'username', 'email' ]

console.log(Object.values(user));
// [ 3, 'Bobby Bear', 'bobby', 'bobby@maple.town' ]

console.log(Object.entries(user));
//[
// ['id',3],
// ['name','BobbyKumanov'],
// ['username','bobby'],
// ['email','bobby@maple.town']
//]

// キーと値のペアを反復処理の中で扱う
Object.keys(user).map((k) => { console.log(k, user[k]); });
Object.entries(user).map(([k, v]) => { console.log(k, v) });

const obj1 = {key1: "value1", key2: "value2"};
const obj2 = {key3: "value3"};
const obj3 = {...obj1, key1:"converted"};

{...obj1, ...obj2} // => { key1: 'value1', key2: 'value2', key3: 'value3' }

obj3 // => { key1: 'converted', key2: 'value2' }

const sns = ((obj) => (obj.width))(someBigObject);

constoriginal={a:1,b:2,c:3};
const copy = { ...original };
console.log(copy);            // { a: 1, b: 2, c: 3 }
console.log(copy===original); // false

const patty = {
  name: 'Patty Rabbit',
  email: 'patty@maple.town',
  address: { town: 'Maple Town' },
};
const rolley = JSON.parse(JSON.stringify(patty));
rolley.name = 'Rolley Cocker';
rolley.email = 'rolley@palm.town';
rolley.address.town = 'Palm Town';
console.log(patty);

//{
// name:'PattyRabbit',
// email:'patty@maple.town',
// address:{town:'MapleTown'}
//}

<!DOCTYPE html>
<html>
  <head>
    <title>Drag-and-drop Sortable List Demo</title>
    <meta charset="utf-8">
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>EMAIL</th>
        </tr>
      </thead>
      <tbody id="products">
        <tr id="product-0" draggable="true">
          <td>jhon@gmail.com</td>
        </tr>
        <tr id="product-1" draggable="true">
          <td>marygirl@yahoo.com</td>
        </tr>
        <tr id="product-2" draggable="true">
          <td>cha24@yahoo.com</td>
        </tr>
      </tbody>
    </table>

    <script>
      let row;
      for (let i = 0; i < 3; i++) {
        const id = "product-" + i.toString();
        const tr = document.getElementById(id);
        tr.addEventListener("dragstart", event => {
          row = event.target;
        });
        tr.addEventListener("dragover", event => {
          const e = event;
          e.preventDefault(event);
          let children= Array.from(e.target.parentNode.parentNode.children);
          if(children.indexOf(e.target.parentNode)>children.indexOf(row)) {
            e.target.parentNode.after(row);
          } else {
            e.target.parentNode.before(row);
          }
        });
      }
    </script>
  </body>
</html>

> [...Array(3)]
[ undefined, undefined, undefined ]

> [...Array(3)].map((_, n) => { console.log(`${n + 1} times`); });
1 times
2 times
3 times

> [...Array(3).keys()]
[0,1,2]

> [...Array(3).keys()].map((n) => { console.log(`${n + 1} times`); });
1 times
2 times
3 times

<!DOCTYPE html>
<html>
  <head>
    <title>Drag-and-drop Sortable List Demo</title>
    <meta charset="utf-8">
    <style type="text/css">
      .slist {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .slist li {
        margin: 10px;
        padding: 15px;
        border: 1px solid #dfdfdf;
        background: #f5f5f5;
      }
      .slist li.hint {
        border: 1px solid #ffc49a;
        background: #feffb4;
      }
      .slist li.active {
        border: 1px solid #ffa5a5;
        background: #ffe7e7;
      }
      * {
        font-family: Arial, Helvetica, sans-serif;
        box-sizing: border-box;
      }
    </style>
    <script src="sort-list.js"></script>
  </head>
  <body>
    <ul id="sortlist" class="slist">
      <li draggable="true" ondragstart="dragStart(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragend="dragEnd(event)" ondragover="dragOver(event)" ondrop="drop(event)">First</li>
      <li draggable="true" ondragstart="dragStart(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragend="dragEnd(event)" ondragover="dragOver(event)" ondrop="drop(event)">Second</li>
      <li draggable="true" ondragstart="dragStart(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragend="dragEnd(event)" ondragover="dragOver(event)" ondrop="drop(event)">Third</li>
      <li draggable="true" ondragstart="dragStart(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragend="dragEnd(event)" ondragover="dragOver(event)" ondrop="drop(event)">Forth</li>
      <li draggable="true" ondragstart="dragStart(event)" ondragenter="dragEnter(event)" ondragleave="dragLeave(event)" ondragend="dragEnd(event)" ondragover="dragOver(event)" ondrop="drop(event)">Fifth</li>
    </ul>

    <script>
      const target = document.getElementById("sortlist");
      let items = target.getElementsByTagName("li");
      let current = null;
      function dragStart(e) {
        current = e.target;
        for (let it of items) {
          if (it != current) { it.classList.add("hint"); }
        }
      }
      function dragEnter(e) {
        if (e.target != current) { e.target.classList.add("active"); }
      }
      function dragLeave(e) {
        e.target.classList.remove("active");
      }
      function dragEnd(){
        for (let it of items) {
          it.classList.remove("hint");
          it.classList.remove("active");
        }
      }
      function dragOver(e) { e.preventDefault(); }
      function drop(e) {
        e.preventDefault();
        if (e.target != current) {
          let currentpos = 0, droppedpos = 0;
          for (let it=0; it<items.length; it++) {
            if (current == items[it]) { currentpos = it; }
            if (e.target == items[it]) { droppedpos = it; }
          }
          if (currentpos < droppedpos) {
            e.target.parentNode.insertBefore(current, e.target.nextSibling);
          } else {
            e.target.parentNode.insertBefore(current, e.target);
          }
        }
      }
    </script>
  </body>
</html>

{
  "extends": "./tsconfig.json",
}

const { pathsToModuleNameMapper } = require("ts-jest"); // 追加
const { compilerOptions } = require("./tsconfig"); // 追加

module.exports = {
  roots: ["<rootDir>/src"],
  testMatch: ["**/__tests__/**/*.+(ts|tsx|js)", "**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": ["ts-jest", { tsconfig: "tsconfig.jest.json" }]
  },
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: "<rootDir>/src" }) // 追加
};

npx @line/create-liff-app

npx @line/liff-inspector

import { Button, Container, TextField } from "@mui/material";
import React, { useRef, useState } from "react";

type OnChangeEvent = React.ChangeEvent<HTMLInputElement>;
const EmailVaildPattern =
  "^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$";

const App = () => {
  const emailRef = useRef<HTMLInputElement>(null);
  const passwordRef = useRef<HTMLInputElement>(null);
  const confirmPasswordRef = useRef<HTMLInputElement>(null);
  const [emailValue, setEmailValue] = useState("");
  const [passwordValue, setPasswordValue] = useState("");
  const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
  const [emailError, setEmailError] = useState(false);
  const [passwordError, setPasswordError] = useState(false);
  const [confirmPasswordError, setConfirmPasswordError] = useState(false);

  const formValidation = (): boolean => {
    let valid = true;

    const e = emailRef?.current;
    if (e) {
      const ok = e.validity.valid;
      setEmailError(!ok);
      valid &&= ok;
    }
    const p = passwordRef?.current;
    if (p) {
      const ok = p.validity.valid;
      setPasswordError(!ok);
      valid &&= ok;
    }
    const c = confirmPasswordRef?.current;
    if (c) {
      if (confirmPasswordValue.length > 0 &&
          passwordValue !== confirmPasswordValue) {
        c.setCustomValidity("パスワードが一致しません");
      } else {
        c.setCustomValidity("");
      }

      const ok = c.validity.valid;
      setConfirmPasswordError(!ok);
      valid &&= ok;
    }

    return valid;
  };

  return (
    <Container component="main" maxWidth="xs">
      <TextField
        margin="normal"
        fullWidth
        required
        inputRef={emailRef}
        value={emailValue}
        error={emailError}
        helperText={emailError && emailRef?.current?.validationMessage}
        inputProps={ {required: true, pattern: EmailVaildPattern} }
        onChange={(e: OnChangeEvent) => setEmailValue(e.target.value)}
        label="Email"
      />

      <TextField
        margin="normal"
        fullWidth
        required
        type="password"
        inputRef={passwordRef}
        value={passwordValue}
        error={passwordError}
        helperText={passwordError && passwordRef?.current?.validationMessage}
        inputProps={ {required: true} }
        onChange={(e: OnChangeEvent) => setPasswordValue(e.target.value)}
        label="Password"
      />

      <TextField
        margin="normal"
        fullWidth
        required
        type="password"
        inputRef={confirmPasswordRef}
        value={confirmPasswordValue}
        error={confirmPasswordError}
        helperText={confirmPasswordError &&
                    confirmPasswordRef?.current?.validationMessage}
        inputProps={ {required: true} }
        onChange={(e: OnChangeEvent) => setConfirmPasswordValue(e.target.value)}
        label="Confirm password"
      />

      <Button
        variant="contained"
        fullWidth
        sx={ {mt: 3} }
        onClick={() => {              // ← ㉑
          if (formValidation()) {
            alert("OK!");
          }
        }}
      >
        Register
      </Button>
    </Container>
  );
};

export default function Story({ image, profileSrc, title }) {
  console.log(image);
  console.log(`url(${image.imageurl ? image.imageurl : ""})`);
  return (
    <StoryWrapper imageUrl={`${image}`}>
      <Avatar src={profileSrc} className="story__avatar" />
      <h4>{title}</h4>
    </StoryWrapper>
  );
}

const StoryWrapper = styled("div")(({ imageUrl }) => ({
  backgroundImage: `url(${imageUrl})`
}));

yarn prisma migrate dev --preview-feature
yarn prisma generate

nest g resource

heroku addons:create heroku-postgresql:hobby-dev

module.exports = {
  assetPrefix: "/sub",
  basePath: "/sub",
};

npx create-next-app sample-next-ts --typescript

yarn create nx-workspace
yarn add @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc styled-components

module.exports = {
  reactStrictMode: true,
  trailingSlash: true,
}

nx export phys --prod

brew install asdf
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ~/.zshrc
exec $SHELL -l

asdf plugin add nodejs
asdf plugin list
asdf list all nodejs

asdf plugin install nodejs
asdf install nodejs latest
asdf global nodejs latest

asdf global nodejs <version>
node -v

asdf local nodejs <version>
node -v

npx create-next-app picosample --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
npm install @picocss/pico

npm i dotenv

import * as dotenv from "dotenv";
dotenv.config(); // これがないと動かない

REACT_APP_API_BASE_URL=http://localhost:9000


NEXT_PUBLIC_FOO=hogehoge

REACT_APP_API_BASE_URL=xxxxxxxxxxxx
REACT_APP_FIREBASE_API_KEY=xxxxxxxxxxxx
REACT_APP_FIREBASE_AUTH_DOMAIN=xxxxxxxxxxxxxxxx

npm i -g npm-check-updates
ncu -u

type ItemProp = {
  to: string;
  text: string;
  icon: any;
};

function Item({ to, text, icon }: ItemProp) {
  return (
    <Link to={to} key={to}>
      <ListItem>
        <ListItemButton>
          <ListItemIcon>{icon}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItemButton>
      </ListItem>
    </Link>
  );
}

export default function UpperLeftMenu() {
  return (
    <>
      <List>
        <Link to="/tempmenu/1" key="/tempmenu/1">
          <ListItem>
            <ListItemButton>
              <ListItemIcon>
                <InboxIcon />
              </ListItemIcon>
              <ListItemText primary="Home" />
            </ListItemButton>
          </ListItem>
        </Link>
        <Item to="/tempmenu/2" text="tempmenu/2" icon={<InboxIcon />} />
        <Item to="/tempmenu/3" text="tempmenu/3" icon={<InboxIcon />} />
      </List>
    </>
  );
}

const API_KEY = "some value"; // https://www.flickr.com/services/apps/create/apply/ でFlickrで取ってこよう

// Flickr画像データのURLを返す
const getFlickrImageURL = (photo, size) => {
  let url = `https://farm${photo.farm}.staticflickr.com/${photo.server}/${photo.id}_${
    photo.secret
  }`;
  if (size) {
    // サイズ指定ありの場合
    url += `_${size}`;
  }
  url += '.jpg';
  return url;
};

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = (photo) => `https://www.flickr.com/photos/${photo.owner}/${photo.id}`;

// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
  let text = `"${photo.title}" by ${photo.ownername}`;
  if (photo.license === '4') {
    // Creative Commons Attribution（CC BY）ライセンス
    text += ' / CC BY';
  }
  return text;
};

// リクエストパラメータを作る
const paramObj = {
  method: 'flickr.photos.search',
  api_key: API_KEY,
  text: 'cat', // 検索テキスト
  sort: 'interestingness-desc', // 興味深さ順
  per_page: 12, // 取得件数
  license: '4', // Creative Commons Attributionのみ
  extras: 'owner_name,license', // 追加で取得する情報
  format: 'json', // レスポンスをJSON形式に
  nojsoncallback: 1, // レスポンスの先頭に関数呼び出しを含めない
};
let params = "";
params = Object.keys(paramObj).map(k => `${k}=${paramObj[k]}`).join("&");
const flickrUrl = `https://api.flickr.com/services/rest/?${params}`;
console.log(flickrUrl);

https.request(flickrUrl, { method: "GET" }, res => {
  console.log('statusCode:', res.statusCode);

  res.on('data', (d) => {
    process.stdout.write(d); // ここでリクエストの値が取れる
  });

  res.on("end", () => {
    console.log("END!");
  });
}).on("error", (error) => {
  console.log(`Error: ${error}`);
}).end();

npm install -g http-server
http-server

- import renderMathInElement from "katex/dist/contrib/auto-render.js";

app.use(express.static(__dirname + "/assets"));

npm i -g firebase-tools

firebase login:list
firebase login
firebase init

firebase
firebase-debug.log*
firebase-debug.*.log*
.firebase/

yarn add -D @nrwl/node
nx g @nrwl/node:application functions

yarn add firebase-admin firebase-functions
yarn add -D firebase-functions-test

yarn add -D depcheck

import * as depcheck from 'depcheck';
import * as fs from 'fs';
import * as path from 'path';

import * as packageJson from '../../package.json';

const PACKAGE_JSON_TEMPLATE = {
  engines: { node: '16' }, // 適切なバージョンを指定する
  main: 'main.js',
};

async function main(): Promise<void> {
  const args = process.argv.slice(2);
  if (!args?.length || !args[0]) {
    throw new Error('Application name must be provided.');
  }

  const APPLICATION_NAME = args[0];
  console.log(`Application name: ${APPLICATION_NAME}`);

  /*****************************************************************************
   * package.json
   * - Filter unused dependencies.
   * - Write custom package.json to the dist directory.
   ****************************************************************************/
  const ROOT_PATH = path.resolve(__dirname + '/../..');
  const DIST_PROJECT_PATH = `${ROOT_PATH}/dist/apps/${APPLICATION_NAME}`;

  console.log('Creating cloud functions package.json file...');

  // Get unused dependencies
  const { dependencies: unusedDependencies } = await depcheck(DIST_PROJECT_PATH, {
    package: {
      dependencies: packageJson.dependencies,
    },
  });

  // Filter dependencies
  const requiredDependencies = Object.entries(packageJson.dependencies as { [key: string]: string })
    ?.filter(([key, _value]) => !unusedDependencies?.includes(key))
    ?.reduce<{ [key: string]: string }>((previousValue, [key, value]) => {
      previousValue[key] = value;
      return previousValue;
    }, {});

  console.log(`Unused dependencies count: ${unusedDependencies?.length}`);
  console.log(`Required dependencies count: ${Object.values(requiredDependencies)?.length}`);

  // Write custom package.json to the dist directory
  await fs.promises.mkdir(path.dirname(DIST_PROJECT_PATH), { recursive: true });
  await fs.promises.writeFile(
    `${DIST_PROJECT_PATH}/package.json`,
    JSON.stringify(
      {
        ...PACKAGE_JSON_TEMPLATE,
        dependencies: requiredDependencies,
      },
      undefined,
      2
    )
  );

  console.log(`Written successfully: ${DIST_PROJECT_PATH}/package.json`);
}

main()
  .then(() => {
    // Nothing to do
  })
  .catch(error => {
    console.error(error);
  });

cp apps/functions/*.json tools/scripts
cp apps/functions/.eslintrc.json tools/scripts
cp apps/functions/jest.config.ts tools/scripts

  "compilerOptions": { "resolveJsonModule": true, "module": "commonjs" },

    // 最初の注意通り`apps/functions`にしている前提
    "functions": {
      // 略
      "architect": {
        // build の項目を build-node に変更: build 時に他にも実行したことがあるのでサブコマンド扱いにする
        "build-node": {
          // 略
        },
        // buildの項目を新しく追加: build-nodeを実行してTypeScriptビルドし, package.jsonを用意
        "build": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "commands": [
              {
                "command": "nx run functions:build-node"
              },
              {
                "command": "ts-node --project ./tools/scripts/tsconfig.json tools/scripts/build-firebase-functions-package-json.ts functions"
              },
              {
                "command": "cd dist/apps/functions && npm install --package-lock-only"
              }
            ],
            "parallel": false
          },
          "configurations": {
            "production": {
              "prod": true
            }
          }
        },
        // ビルドしてFirebase Emulatorを使って実行するよう修正
        "serve": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "command": "nx run functions:build && firebase emulators:start --only functions --inspect-functions"
          }
        },
        // ビルドしてfunctions:shellを使う設定を追加
        "shell": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "command": "nx run functions:build && firebase functions:shell --inspect-functions"
          }
        },
        // shell と同じ
        "start": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "command": "nx run functions:shell"
          }
        },
        // デプロイ設定を追加
        "deploy": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "command": "firebase deploy --only functions"
          }
        },
        // lint と test はそのまま
      }
    }

  // 作ったアプリケーション名で設定する
  "functions": {
    "source": "dist/apps/functions",
    "ignore": [
      "node_modules",
      ".git",
      "firebase-debug.log",
      "firebase-debug.*.log",
      ".eslintrc.json",
      "jest.config.ts",
      "tsconfig.app.json",
      "tsconfig.json",
      "tsconfig.spec.json"
    ],
    "predeploy": [
      "nx lint functions",
      "nx build functions"
   ]
  },

nx g @nrwl/react:storybook-configuration --name=ui

nx g @nrwl/react:lib ui

nx g @nrwl/react:component button --project ui

nx generate remove <project-name>

nx g rm <project-name>

nx generate @nrwl/next:application --name=society --dry-run --no-interactive

nx g @nrwl/workspace:move --project oldNG newNG
nx g mv --project oldNG newN

             "outputPath": "dist/apps/api",
             "main": "apps/api/src/main.ts",
             "tsConfig": "apps/api/tsconfig.app.json",
-            "assets": ["apps/api/src/assets"]
+            "assets": ["apps/api/src/assets"],
+            "generatePackageJson": true
           },
           "configurations": {
             "production": {
             "outputPath": "dist/apps/html",
             "main": "apps/html/src/main.ts",
             "tsConfig": "apps/html/tsconfig.app.json",
-            "assets": ["apps/html/src/assets"]
+            "assets": ["apps/html/src/assets"],
+            "generatePackageJson": true
           },

npx create-nx-workspace my-project

yarn nx list # we can confirm options
yarn add @nrwl/react
yarn nx list @nrwl/react # check schematics
yarn nx g @nrwl/react:application --help # confirm options
yarn nx g @nrwl/react:application store --dry-run
yarn nx g @nrwl/react:application store



yarn nx run <proj>:<target>
yarn nx run store:serve
yarn nx run store:serve --port 3000 # we can set port in workspace.json
yarn nx run store:lint
nx serve store

yarn nx run store:serve # run react in tutorial
yarn add @mui/material

yarn nx g @nrwl/react:lib ui-shared --directory=store --dry-run
yarn nx g @nrwl/react:lib ui-shared --directory=store
yarn nx g @nrwl/react:component header --project=store-ui-shared

yarn nx g @nrwl/workspace:lib util-formatters --directory=store --dry-run
yarn nx g @nrwl/workspace:lib util-formatters --directory=store

yarn nx graph

yarn nx @nrwl/react:lib feature-game-detail --directory=store --appProject=store

yarn add -D @nrwl/express # 公式ページから調べて適切なコマンドを実行
yarn nx g @nrwl/express:application api --frontendProject=store --dry-run
yarn nx g @nrwl/express:application api --frontendProject=store
yarn nx run api:serve
yarn nx dep

yarn nx run-many --target=serve --projects=api,store --parallel=true

yarn nx run store:serveAppAndApi

yarn nx dep

yarn nx g @nrwl/workspace:lib util-interfaces --directory=api --dry-run
yarn nx g @nrwl/workspace:lib util-interfaces --directory=api

yarn add @nrwl/storybook -D
yarn nx list @nrwl/storybook
yarn nx g @nrwl/react:storybook-configuration store-ui-shared --configureCypress --generateStories --dry-run
yarn nx g @nrwl/react:storybook-configuration store-ui-shared --configureCypress --generateStories
yarn nx run store-ui-shared:storybook

yarn nx run store-ui-shared-e2e:e2e --watch
yarn nx run store-ui-shared-e2e:e2e --headless

yarn nx run store:test
yarn nx run store:test --watch

yarn nx run store:build --configuration=production

yarn nx run store:lint

yarn nx affected:dep-graph --base=<branch-name>
yarn nx affected:test --base=<branch-name>
yarn nx affected:lint --base=<branch-name>

yarn nx affected:test --all


yarn nx migrate latest

nx run my-js-app:build
nx build my-js-app
nx run-many --target=build --projects=app1,app2
nx run-many --target=test --all # Runs all projects that have a test target, use this sparingly.
nx affected --target=build# 毎回すべてのプロジェクトを実行するよりも効率的
nx generate workspace-generator my-generator # ワークスペース用のカスタムジェネレーター
nx migrate latest # Updates the version of Nx in `package.json` and schedules migrations to be run
nx migrate --run-migrations # Runs the migrations scheduled by the previous command.
nx graph
nx graph --watch # Updates the browser as code is changed
nx affected:graph # Highlights projects which may have changed in behavior
nx list
nx list @nrwl/react # Lists capabilities in the @nrwl/react plugin

"frontend": {
    "targets": {
        //...
        "ls-project-root": {
            "executor": "nx:run-commands",
            "options": {
                "command": "ls apps/frontend/src"
            }
        }
    }
}

nx run frontend:ls-project-root

yarn create nx-workspace@latest
npx create-nx-workspace@latest --package-manager=yarn

yarn add @mui/material @emotion/react @emotion/styled @mui/styled-engine-sc styled-components

heroku create -a ys-nx-express-prisma
heroku config:set -a ys-nx-express-prisma PROJECT_NAME=express
heroku config:set -a ys-nx-express-prisma PORT=80

heroku buildpacks:add -a ys-nx-express-prisma heroku/nodejs

nx run prisma:ls

yarn init
yarn add @prisma/client
yarn add -D @types/node prisma ts-node typescript

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "esnext"
    ],
    "esModuleInterop": true
  }
}

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const userData = {
  data: {
    name: "Alice",
    email: "alice@prisma.io",
    posts: { create: { title: "Hello World" } },
    profile: { create: { bio: "I like turtles" } },
  },
};

async function main() {
  // await prisma.user.create(userData);
  const allUsers = await prisma.user.findMany({
    include: { posts: true, profile: true },
  });
  console.log(allUsers, { depth: null });

  const post = await prisma.post.update({
    where: { id: 1 },
    data: { published: true },
  });
  console.log(post);
}

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

  "scripts": {
    "dev": "npx ts-node index.ts",
    "start": "npx ts-node index.ts"
  }

web: yarn start

npx prisma init

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String   @db.VarChar(255)
  content   String?
  published Boolean  @default(false)
  author    User     @relation(fields: [authorId], references: [id])
  authorId  Int
}

model Profile {
  id     Int     @id @default(autoincrement())
  bio    String?
  user   User    @relation(fields: [userId], references: [id])
  userId Int     @unique
}

model User {
  id      Int      @id @default(autoincrement())
  email   String   @unique
  name    String?
  posts   Post[]
  profile Profile?
}

npx prisma migrate dev --name init

generator client {
  provider = "prisma-client-js"
}

// `mydb`はmysqlに作ったデータベース名を指定すること
datasource mydb {
  provider = "mysql"
  url      = env("DATABASE_URL")
}

model User {
  id       Int    @id @default(autoincrement())
  name     String @mydb.VarChar(255)
  email    String @unique @mydb.VarChar(255)
  password String @mydb.VarChar(255)
}

nx run prisma:init


nx run prisma:migrate
nx run prisma:seed

{
  "prisma": {
    "schema": "libs/prisma/prisma/schema.prisma"
  }
}

heroku addons:create heroku-postgresql:hobby-dev

  "scripts": {
    "test": "DATABASE_URL='mysql://root:root@localhost:3306/mydb_test' NODE_ENV=test jest"
  },

import { PrismaClient } from "@prisma/client";
import { Prisma } from ".prisma/client";
const prisma = new PrismaClient();

export const resetTable = async (modelNames: Prisma.ModelName[]): Promise<void> => {
  const tablenames = modelNames.map((modelName) => ({ tablename: modelName }));

  for (const { tablename } of tablenames) {
    try {
      await prisma.$executeRawUnsafe(`TRUNCATE TABLE ${tablename};`);
    } catch (error) {
      console.log({ error });
    }
  }
};

npx create-react-app {プロジェクト名} --template typescript

const refSample = useRef(null);                 # もとのコード
const refSample = useRef<HTMLDivElement>(null); # HTMLDivElementとは限らないのできちんと調べる

const resetScroll = (): void => refSample.current.scrollTo(0, 0); # もとのコード
const resetScroll = (): void => refSample.current?.scrollTo(0,0); # 修正版

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  return (
    <>
      <Box component="section" sx={{ display: "flex", flexDirection: "column", width: "400px", gap: "10px" }}>
        <TextField
          variant="outlined" label="Email"
          value={email} {/* ここが大事 */}
          onChange={ev => setEmail(ev.target.value)} />
        <TextField
          variant="outlined" label="Password" type="password"
          value={password} {/* ここが大事 */}
          onChange={ev => setPassword(ev.target.value)} />
      </Box>
    </>);

import React from 'react';
import PropTypes from 'prop-types';

import Markdown from 'markdown-to-jsx';
import renderMathInElement from 'katex/dist/contrib/auto-render';

const MarkdownViewer = ({ content }) => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (ref.current) {
      renderMathInElement(ref.current, {
        delimiters: [
          { left: '$$', right: '$$', display: true },
          { left: '\\[', right: '\\]', display: true },
          { left: '$', right: '$', display: false },
          { left: '\\(', right: '\\)', display: false },
        ],
      });
    }
  }, [ref.current]);

  return (
    <div ref={ref}>
      <Markdown>{content}</Markdown>
    </div>
  );
};

MarkdownViewer.propTypes = {
  content: PropTypes.string.isRequired,
};

MarkdownViewer.defaultProps = {};

import {useState} from "react"

export default function Index () {
  const [count, setCount] = useState(0);
  const onButtonClick = () => {
    const new_count = count + 1;
    setCount(new_count);
    alert(`count：${new_count}`);
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

import {useState} from "react"

export default function Index () {
  const [count, setCount] = useState(0);
  const onButtonClick = () => {
    setCount((pre_count) => pre_count + 1)  //初回クリック時のpre_countは0
    setCount((pre_count) => {               //初回クリック時のpre_countは1
      alert(`count：${pre_count}`);
      return pre_count
    })
  }

  return (
    <div>
      <button onClick={onButtonClick}>押して！</button>
    </div>
  )
}

brew install node
brew install watchman
sudo gem install cocoapods


sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

rbenv install 2.7.4

npx react-native init AwesomeProject
npx react-native init AwesomeTSProject --template react-native-template-typescript

npx react-native start # at the directory, AwesomeProject
cd ios
pod install
cd /path/to/AwesomeProject
npx react-native run-ios # in another terminal

### はコメント
### GETリクエストは単純に1行でよい
###
### 自分のIPアドレス
GET https://httpbin.org/ip

### xmlを表示する
GET https://httpbin.org/xml

### ヘッダをつける
POST https://httpbin.org/post?foo=bar
User-Agent: Emacs24

### POSTリクエスト
### ヘッダとデータの間には空行を入れる
POST https://httpbin.org/post?val=key
User-Agent: Emacs24
Content-Type: application/json

{
  "foo": "bar"
}

const SidebarContainer = styled('aside')(({isOpen, ...props}) => {
  return {
    position: 'fixed',
    opacity: isOpen ? '90%' : '0',
    top: isOpen ? '0' : '-100%',
  };
});

type Props = {
  onClick: (event: React.MouseEvent<HTMLInputElement>) => void
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void
  onBlur: (event: React.FocusEvent<HTMLInputElement>) => void
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
}

const foo = document.querySelector<HTMLElement>('.foo');
if (foo) {
    foo.style.display = '';
}

const bars = document.querySelectorAll<HTMLInputElement>('input[name="bar"]');
bars.forEach((bar) => {
    console.log(bar.value);
});

import { ReactNode } from 'react';

function Parent({ children }: {
  children: ReactNode
}) {
  return (
    <div>{ children }</div>
  );

Property 'gtag' does not exist on type 'Window & typeof globalThis'.  TS2339

yarn add -D @types/gtag.js

{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": [
      "es2020",
      "dom",
      "dom.iterable"
    ],
    "jsx": "preserve",
    "sourceMap": true,
    "outDir": "./dist",
    "rootDir": "/",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "allowJs": true,
    "noEmit": true,
    "incremental": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["dist", "node_modules"],
  "compileOnSave": false
}

handleDelete: (e: React.MouseEvent<HTMLInputElement>) => void;

interface Status {
  [parameter: string]: number;
}
const myStatus: Status = {
  level: 22,
  experience: 3058,
  maxHP: 156,
  maxMP: 174,
  attack: 39,
  defense: 25,
};

const foo: unknown = '1,2,3,4';

if (typeof foo === 'string') { console.log(foo.split(',')); }

console.log(foo.split(',')); //コンパイルエラー

// type 型の名前 = (引数名: 引数の型) => 戻り値の型;
type Increment = (num: number) => number;