kazu69 kazu69

フロントエンドの技術選定で考えること

Frontend Study 用

前提: フロントエンドは式年遷宮が有効である

DB を持たないため、表層の技術を交換するだけで済む
- JSON API が実質的な分解点になっている
- 近年ではモバイルアプリのために JSON API が切り離されていることが多く、ここの利用者になるだけでよい
Rails や PHP で ORM ヘルパーにべったりな場合に困難になる(クライアントで同等のバリデーションを再現する必要)

(翻訳) React Hooks は魔法ではなく、ただの配列だ

この記事は https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e の日本語訳です。途中で力尽きて雑な翻訳になってる箇所がいくつかあります。

どのように Hooks が動いているか

私は、新しい Hooks の API の "magic" な挙動に悩んでいる人が結構いると聞いています。なのでこの構文の提案が、少なくとも表面的なレベルではどう動いているか、解説してみようと思います。

One-line browser notepad 📝

Sometimes you just need to quickly take some notes.

A trick is to use the data: scheme with data:text/html to show just a piece of HTML in your browser. Then using the mighty contentEditable to make the whole thing editable.

To copy/paste into your browser address bar:

data:text/html,<html contenteditable>

example

create rpm hello using rpmbuild.

docker build -t fedora -f ./fedora.dockerfile .
ocker run -it fedora /bin/bash
bash-4.3# hellow
bash: hellow: command not found
bash-4.3# hello

React + Typescript Cheatsheet

Setup

If you use atom... download & install the following packages:

What are Typescript type definition files? (*.d.ts)

前提: 完成していて、比較的支持を集めていて、JavaScriptを中心にした書籍 (DOM APIよりは言語を中心とした内容)

追記: JavaScriptの入門書 #jsprimerを書いている

最初からES2015で学ぶことを前提にした初心者〜中級者向けのJavaScript本がなかったので書いてる。 ES2015でJavaScriptという言語のコア部分は大きく変わったので、それを前提とした内容にする予定。

	/* variation on https://medium.com/@DanHomola/react-higher-order-components-in-typescript-made-simple-6f9b55691af1 */
	import * as React from 'react'
	import { wrapDisplayName } from 'recompose'

	// Props you want the resulting component to take (besides the props of the wrapped component)
	interface ExternalProps {}

	// Props the HOC adds to the wrapped component
	export interface InjectedProps {}

	package main

	import (
	"fmt"
	"reflect"
	)

	// Name of the struct tag used in examples
	const tagName = "validate"

	import { Kind } from 'graphql/language';
	import { GraphQLScalarType } from 'graphql';

	function serializeDate(value) {
	if (value instanceof Date) {
	return value.getTime();
	} else if (typeof value === 'number') {
	return Math.trunc(value);
	} else if (typeof value === 'string') {
	return Date.parse(value);

	import * as React from 'react';
	import { Component } from 'react';

	export default function HOCBaseRender<Props, State, ComponentState>(
	Comp: new() => Component<Props & State, ComponentState>) {
	return class HOCBase extends Component<Props, State> {
	render() {
	return <Comp {...this.props} {...this.state}/>;
	}
	}