ktyr report

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import FetchData from './FetchData';

const importantTarget = ReactDOM.createRoot(
  document.querySelector(".notice .notice-inner") as HTMLElement
);
importantTarget.render(<FetchData wrapper=".notice" url="/notice/?mode=important" />);

　
FetchData.tsx

import { useEffect,useState } from "react";
import parse from "html-react-parser";

type params = {
    wrapper  : string;
    url      : string;
};
function FetchData(props:params){
    const {wrapper,url} = props;
    const [html, setHtml] = useState<string>("");
    const wrapperElm:HTMLElement | null = document.querySelector(wrapper);

    useEffect(() => {
        fetch(url)
        .then((response)=>{
            if (!response.ok) {
                throw new Error();
            }
            return response.text();
        })
        .then((text) => {
            if(text.replace(/\s/g,'')){
                setHtml(text);
                if(wrapperElm){
                    wrapperElm.classList.remove("hide");
                }
            }
        })
        .catch((error) => {

        });
    }, []);

    return <>{html == "" ? "" : parse(html)}</>;
};
FetchData.defaultProps = {
    wrapper  : '',
    url      : '',
};
export default FetchData;

function onOpen(){
    var menu = [
        {name: "メニュー名", functionName: "実行関数名"}
    ];
    SpreadsheetApp.getActiveSpreadsheet().addMenu("コマンド",menu);
}

const d = {
    firstName : 'John',
    lastName  : 'Smith'
};
const t = `I'm ${d.firstName} ${d.lastName}.`;

const {firstName,lastName} = d;
const {firstName:namae,lastName:myoji} = d;

const d = {
    lastName  : 'Smith'
};
const {firstName = 'Jeff',lastName} = d;
const t = `I'm ${firstName} ${lastName}.`;

const d = ['John','Smith'];
const [firstName,lastName] = d;
const t = `I'm ${firstName} ${lastName}.`;

function add_wp_ver_js( $src ) {
    $src = add_query_arg(['s'=>''],$src);
    return $src;
}
add_filter( 'script_loader_src', 'add_wp_ver_js', 9999 );

const f = (v) => {
    return v;
};
const f = v => {
    return v;
};
const f = (v1,v2) => v1 + v2;
const f = (v1,v2) => (
    {
        firstName : v1,
        lastName  : v2
    }
)
const f = (v = 5) => {
    return v;
};

<mt:EntryFlag flag="convert_breaks" setvar="entry_flag">
<mt:If name="entry_flag" eq="block_editor">
    <mt:SetVarBlock name="_block_editor"><mt:EntryBody convert_breaks="0"><mt:EntryMore convert_breaks="0"></mt:SetVarBlock>
    <mt:BlockEditorBlocks name="_block_editor">
        <mt:If name="type" eq="custom-title">
            //処理
        <mt:ElseIf name="type" eq="custom-h4">
            //処理
        </mt:If>
    </mt:BlockEditorBlocks>
<mt:Else>
    <mt:EntryBody>
    <mt:EntryMore>
</mt:If>

<mt:Var name="target" regex_replace="/^\-?\d+\.(\d*)$/","$1" setvar="_one_tenth">
<mt:Var name="target" regex_replace="/^(\d+)\.\d+$/","$1" setvar="_result">
<mt:If name="_one_tenth" ne="$target">
    <mt:If name="_one_tenth" gt="0">
        <mt:SetVar name="_result" op="+" value="1">
    </mt:If>
</mt:If>

getRGBAByHex(hex,alpha){
    if (hex.slice(0,1) == "#")hex = hex.slice(1) ;
    if (hex.length == 3)hex = hex.slice(0,1) + hex.slice(0,1) + hex.slice(1,2) + hex.slice(1,2) + hex.slice(2,3) + hex.slice(2,3);
    let rgb = [hex.slice(0,2),hex.slice(2,4),hex.slice(4,6)].map(function(str){
        return parseInt(str,16);
    });
    return `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${alpha})`;
}

animate() {
    requestAnimationFrame(()=>{
        this.animate();
    });
    const ctx;
    ctx = canvas.getContext('2d');
    ctx.globalCompositeOperation = "source-over";
    ctx.globalAlpha = 1.0;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.beginPath();
    ctx.rect(0,0,canvas.width,100);
    ctx.clip();
    //ここに描画処理
    ctx.restore();
}

const Router = require('koa-router');
const router = new Router();
router.get('/', async (ctx, next) => {
    if(エラー条件){
        ctx.status = 400;//500
        return;
    }
    await ctx.render('index', {});
});