Forem: Tomohiko Himura

Remove ANSI color on Emacs

Tomohiko Himura — Fri, 26 Jun 2020 00:14:03 +0000

When the command is executed on Emacs, escape sequences for coloring may be added.
I wont to erase this.

コマンドの実行結果をEmacsのバッファーに出力すると、色をつけるためのエスケープシーケンスが付与されてしまうことがある。
邪魔なので、削除したい。

if you can rewrite the buffer, you can use ansi-color-filter-region in ansi-color.el.
A simple example follows.

バッファーの内容を書き換えてしまいたいのであれば、ansi-color.elのansi-color-filter-regionが使える。雑にバッファー全体に適用する関数はこんな感じ。

(defun remove-ansi-color ()
  (interactive)
  (save-excursion
   (mark-whole-buffer)
   (ansi-color-filter-region (region-beginning) (region-end))))

hostname of anchor element throws undefined exception when href attribute has non break space in IE11

Tomohiko Himura — Tue, 10 Mar 2020 00:42:35 +0000

IE11 で以下のコードで未定義のエラーが発生する

var dom = document.createElement('a'); dom.href="http://example.com&nbsp;あああ"
dom.hostname

とマルチバイトをもつURLをhrefにいれた状態でhostnameを呼び出すと未定義のエラーが発生した。

create-react-appのTypeScript対応方法について調べた - How create-react-app supports TypeScript

Tomohiko Himura — Mon, 04 Nov 2019 14:59:52 +0000

Summary

use @babel/preset-typescript through @babel/preset-react-app
type checking within webpack using ForkTsCheckerWebpackPlugin

Motivation

TypScriptでReactするおすすめの方法はなんだろう
ReactのサイトにTypeScriptの使い方って載ってない
create-react-appのドキュメントにはある
どんな設定になっているんだろう?

Detail

v3.2.0で確認

感想

確認はしてないが、tscをつかうより@babel/plugin-transform-typescriptを使うほうがトランスパイルするのは早そうに感じる。すべての文法に対応しているかどうかわからない点が気になるといえば気になるが、型チェックのみTypeScriptを使うのはクリーンで良さそう。
babelを利用した場合は型チェックはされないがどうしているか確認したらForkTsCheckerWebpackを利用しているだけだった。ts-loaderを利用する場合もこちらをつかって、型チェックするほうが効率的な気がする。(未確認)

createContextしたファイルでProviderを使わないほうが良い - it's better not to use Provider and use createContext in same file

Tomohiko Himura — Mon, 04 Nov 2019 14:23:12 +0000

Summary

ReactでContext APIを使うときcreateContextを使うファイルとProviderを使うファイルが同じで、Consumerだけ別のファイルで利用した場合、createContextとProviderを同一ファイルで利用すると依存が循環してしまう。
これを気にする場合は、createContxtを使うファイルも分割したほうが良い。

When using Consumer in a separate file when using the Context API in React, it is better not to use createContext and Provider in the same file, because the dependency cycles.

eiel-sample-code / context-dependencies-sample

Detail

Providerは子コンポーネントにConsumerを持つことになるので、普通に使うとConsumerへの依存ができてしまう。ProviderとcreateContextで作成したContextが同一ファイルに定義されているとConsumerはContextをimportする必要があるため、Providerの定義されたファイルをimportしてしまい循環する。
これを回避するには、createContextするファイルは独立させ、ProviderとConsumerはそれぞれContextをimportすればよい。

bad

[Context, Provider] -> [Consumer] -> [Context, Provider]

good

[Consumer] -> [Context]
[Provider] -> [Context][Consumer]

型やデフォルト値やContextに渡す値を含めて依存を下図に示す。
サンプルコード内の名前に合わせています。

Sample Code (Good)

context.js

// @flow
import { createContext } from 'react';

export type ContextValueType = {
    isSpecial: boolean;
}

const defaultValue: ContextValueType = { isSpecial: false };
export const ContextObject = createContext<ContextValueType>(defaultValue);

App.js

// @flow
import React from 'react';
import { ContextObject } from './context';
import ContextConsumer from './ContextConsumer';
import type { ContextValueType } from "./context";

const contextValue: ContextValueType = { isSpecial: true };

function App() {
  return (
      <ContextObject.Provider value={contextValue}>
        <ContextConsumer />
      </ContextObject.Provider>
  );
}

export default App;

ContextConsumer.js

// @flow
import { useContext } from 'react';
import { ContextObject } from './context';

export default function ContextConsumer(): string {
    const { isSpecial } = useContext(ContextObject);
    return isSpecial ? 'special!!!' : 'normal.';
}

Sample Code(bad)

bad tag - GitHub

App.js

// @flow
import React, { createContext } from 'react';
import ContextConsumer from './ContextConsumer';

export type ContextValueType = {
    isSpecial: boolean;
}

const defaultValue: ContextValueType = { isSpecial: false };
export const ContextObject = createContext<ContextValueType>(defaultValue);

const contextValue: ContextValueType = { isSpecial: true };

function App() {
  return (
      <ContextObject.Provider value={contextValue}>
        <ContextConsumer />
      </ContextObject.Provider>
  );
}

export default App;

ContextConsumer

// @flow
import { useContext } from 'react';
import { ContextObject } from './App';

export default function ContextConsumer(): string {
    const { isSpecial } = useContext(ContextObject);
    return isSpecial ? 'special!!!' : 'normal.';
}

ESLint result

$ yarn eslint .

/Users/cw-himura/Program/context-dependecies-sample/src/App.js
  3:1  error  Dependency cycle detected  import/no-cycle

/Users/cw-himura/Program/context-dependecies-sample/src/ContextConsumer.js
  3:1  error  Dependency cycle detected  import/no-cycle

✖ 2 problems (2 errors, 0 warnings)