ktyr report

JavaScript

[React]koa-router備忘録

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

[JavaScript]スクロール無効化

window.addEventListener('touchmove', (e)=>{this.cancelScroll(e);}, { passive: false });
window.addEventListener('mousewheel', (e)=>{this.cancelScroll(e);}, { passive: false });

cancelScroll(e) {
    e.preventDefault();
}

[React]State

import { useState } from "react"
export const App = () => {
    const [num, setNum] = useState(0);
    const onClickButton = () => {
        setNum(num + 1);
    };
    return (
        <>
        <button onClick={onClickButton}>Button</button>
        <p>{num}</p>
        </>
    );
};

[React]Props

blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.message}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green" message="Great" />
        <blueMessage color="red" message="Bad" />
        <button onClick={onClickButton}>button</button>
        </>
    );
}

　
childrenを使う場合
blueMessage.jsx

export const blueMessage = (props) => {
    console.log(props);
    const contentStyle = {
        color : props.color,
        fontSize : "20px"
    };
    return <p style={contentStyle}>{props.children}</p>
};

　
App.jsx

import { blueMessage } from "./components/blueMessage";
export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <blueMessage color="green">Great</blueMessage>
        <blueMessage color="red">Bad</blueMessage>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

[React]関数やスタイルの適用

App.jsx

export const App = () => {
    const onClickButton = () => {
        alert();
    };
    const contentStyle = {
        color : "blue",
        fontSize : "20px"
    };
    return (
        <>
        <h2 style={{ color:"red" }}>Hello</h2>
        <p style={contentStyle}>World</p>
        <button onClick={onClickButton}>button</button>
        </>
    );
}

[React]export

App.jsx

export const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}

　
index.js

import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />,document.getElementById("root"));

[React]ReactDOM

import ReactDOM from "react-dom";
import { Fragment } from "react";
const App = () => {
    return (
        <Fragment>
            <h2>Hello</h2>
            <p>World</p>
        </Fragment>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

　
省略できる

import ReactDOM from "react-dom";
const App = () => {
    return (
        <>
            <h2>Hello</h2>
            <p>World</p>
        </>
    );
}
ReactDOM.render(<App />,document.getElementById("root"));

[JavaScript]getDateStrByFormat

getDateStrByFormat(format,d,defaultValue){
    if(typeof d == 'string'){
        d = this.getDateByYYYYMMDD(d);
    }
    if(!d){
        if(defaultValue != undefined && defaultValue != null){
            return defaultValue;
        }else{
            d = new Date();
        }
    }
    if(!format){
        format = 'Y-m-d';
    }
    const _pz = function(v,digits){
        var vs = v.toString();
        while(vs.length < digits){
            vs = '0' + vs;
        }
        return vs;
    };
    return format
        .replace(/Y/g,d.getFullYear())
        .replace(/y/g,d.getFullYear().toString().substr(2,2))
        .replace(/n/g,d.getMonth()+1)
        .replace(/m/g,_pz(d.getMonth()+1,2))
        .replace(/j/g,d.getDate())
        .replace(/d/g,_pz(d.getDate(),2))
        .replace(/G/g,d.getHours())
        .replace(/H/g,_pz(d.getHours(),2))
        .replace(/i/g,_pz(d.getMinutes(),2))
        .replace(/s/g,_pz(d.getSeconds(),2))
        .replace(/J/g,['日','月','火','水','木','金','土'][d.getDay()])
        .replace(/D/g,['Sun','Mon','Tue','Wed','Thu','Fri','Sat'][d.getDay()]);
}

[JavaScript]文字列yyyy-mm-ddからDateを得る

js

function getDateByYYYYMMDD(yyyymmdd) {
    var tmp = void 0,
        match = void 0;
    if (match = yyyymmdd.match(/[\d]{4}\-[\d]{2}\-[\d]{2}/)) {
        if (match.length) {
            tmp = match[0].split('-');
        }
    } else if (match = yyyymmdd.match(/[\d]{4}[\d]{2}[\d]{2}/)) {
        if (match.length) {
            tmp = [match[0].substr(0, 4), match[0].substr(4, 2), match[0].substr(6, 2)];
        }
    }
    if (!tmp || tmp.length < 3) {
        return null;
    }
    return new Date(Number(tmp[0]), Number(tmp[1]) - 1, Number(tmp[2]), 0, 0, 0, 0);
}

es6

getDateByYYYYMMDD(yyyymmdd){
    let tmp,match;
    if(match = yyyymmdd.match(/[\d]{4}\-[\d]{2}\-[\d]{2}/)){
        if(match.length){
            tmp = match[0].split('-');
        }
    }else if(match = yyyymmdd.match(/[\d]{4}[\d]{2}[\d]{2}/)){
        if(match.length){
            tmp = [match[0].substr(0,4),match[0].substr(4,2),match[0].substr(6,2)];
        }
    }
    if(!tmp || tmp.length < 3){
        return null;
    }
    return new Date(Number(tmp[0]),Number(tmp[1])-1,Number(tmp[2]),0,0,0,0);
}