やったこと
Reactの環境構築の続き!
Issue Templateについて
Issueのtemplateを作成したい場合には、二つの方法がある。
一つはSettingsから設定する方法
もう一つは.github/workflows/ISSYE_TEMPLATEに設定する方法
設定する内容:
- バグの詳細
- 報告者が想定する原因
- 発生状況を再現
- 端末情報
- 二次障害の懸念 を記載する
ESLintについて
ESLint設定しておきながらあんまり知らないな〜と思ったので調べてみる
今回、”eslint:recommended”を指定したが実際中で何をチェックしているのか知らなかった
“eslint:recommended”は何をチェックしているのか
この記事を参照 ESLintの推奨設定（eslint:recommended）のチェック内容
List of available rules - ESLint - Pluggable JavaScript linter
-
no-cond-assign
if, for, while, and do…whileの条件式で代入演算子（=など）を許可しない。
比較演算子（==,===など）のタイプミスで代入演算子が入力された箇所などを見つけてくれる -
no-console
consoleオブジェクトのメソッド（console.log等）の記述を許可しない。
公開時の消し忘れを防いでくれる。 -
no-constant-condition
if, for, while, and do…whileや三項演算子（?:）の条件式を定数式（リテラルなど）にすることを許可しない。
必ず実行されたり、一度も実行されなかったりするなど、条件文として不適切な記述が無いかチェックしてくれる -
no-control-regex
正規表現内でASCII制御文字の使用を許可しない。 -
no-debugger
開発時のブレークポイントの設定などに使用するdebuggerステートメントの記述を許可しない。
公開時の消し忘れを防いでくれる。 -
no-dupe-args
関数宣言や関数式の引数の重複を許可しない。 -
no-dupe-keys
オブジェクトリテラルでキーの重複を許可しない。 -
no-duplicate-case
switch文でcaseの重複を許可しない。 -
no-empty-character-class
正規表現で空の文字クラス（[]）を許可しない。 -
no-empty
空のブロックを許可しない。 no-ex-assign
try…catch 文でcatchブロック内で例外オブジェクトを上書きすることを許可しない。try { // code } catch (e) { e = 10; // 例外オブジェクトを上書き }-
no-extra-boolean-cast
不必要なboolean型の型変換を許可しない。 -
no-extra-semi
不必要なセミコロンを許可しない。 -
no-func-assign
関数宣言として記述された関数への上書きを許可しない。 no-inner-declarations
ネストブロック内での変数や関数宣言を許可しない。 （デフォルトでは関数宣言のみ）
if (test) {
function doSomething() { }
}
function doSomethingElse() {
if (test) {
function doAnotherThing() { }
}
}
-
no-invalid-regexp
RegExp コンストラクタ内で無効な正規表現文字列を許可しない。 -
no-irregular-whitespace
Unicodeの特殊な空白文字を許可しない。 -
no-obj-calls
グローバルオブジェクトを関数として呼び出すことを許可しない。 -
no-regex-spaces
正規表現文字列の中で２文字以上の連続した空白を許可しない。 -
no-sparse-arrays
空のスロットを含む配列を許可しない。
連続したカンマはカンマのタイプミスである可能性がある。
一通り見たけど、割と当たり前な部分をチェックしてくれてるんだな〜〜
“react/recommended”は何をチェックしているのか？
-
react/display-name
Prevent missing displayName in a React component definition
(Reactコンポーネント定義でdisplayNameが欠落しないようにする)
＊これはクラスコンポーネントの際に必要になるため割愛 -
react/no-children-prop
Prevent passing of children as props.
(childrenをpropsとして渡すことを禁止する)
incorrect
<div children='Children' />
<MyComponent children={<AnotherComponent />} />
<MyComponent children={['Child 1', 'Child 2']} />
React.createElement("div", { children: 'Children' })
correct
<div>Children</div>
<MyComponent>Children</MyComponent>
<MyComponent>
<span>Child 1</span>
<span>Child 2</span>
</MyComponent>
React.createElement("div", {}, 'Children')
React.createElement("div", 'Child 1', 'Child 2')
react/no-danger-with-children
Report when a DOM element is using both children and dangerouslySetInnerHTML
(DOM 要素が children と dangerouslySetInnerHTML の両方を使用している場合reportする)
dangerouslySetInnerHTMLとは
マークダウンエディタを作りたい場合など、ブラウザ上で記述したHTMLのプレビューを作りたいときに使う
しかし、XSSになる危険性があるのであまり使う機会は少ないかも
参考記事 ReactのdangerouslySetInnerHTML使ってみた
react/no-deprecated(非推奨のメソッドを使用しないようにする)
incorrect// old lifecycles (since React 16.9) componentWillMount() { } componentWillReceiveProps() { } componentWillUpdate() { }correct
UNSAFE_componentWillMount() { } UNSAFE_componentWillReceiveProps() { } UNSAFE_componentWillUpdate() { }-
react/no-direct-mutation-state
Prevent direct mutation of this.state
(this.stateの直接的な変更を防ぐ) -
react/no-find-dom-node
Prevent usage of findDOMNode
(findDOMNodeの使用を防ぐ) -
react/no-is-mounted
Prevent usage of isMounted
(isMountedの使用を防ぐ) -
react/no-render-return-value
Prevent usage of the return value of React.render (React.renderの戻り値を使用しないようにする) react/no-string-refs
Prevent string definitions for references and prevent referencing this.refs
(リファレンスに文字列を定義し、this.refs を参照できないようにする。)
inccorect
var component = this.refs.hello;
react/no-unescaped-entities
Detect unescaped HTML entities, which might represent malformed tags
(不正なタグを表すかもしれない、エスケープされていないHTMLエンティティを検出する)
example
<MyComponent>{'Text'}}</MyComponent>
react/no-unknown-property
Prevent usage of unknown DOM property
(unknownなDOMプロパティの使用を防止する)
incorrect
var Hello = <div class="hello">Hello World</div>;
correct
var Hello = <div className="hello">Hello World</div>;
react/prop-types
Prevent missing props validation in a React component definition
(Reactコンポーネント定義でpropsの検証漏れを防止する)
example
interface Props {
age: number
}
function Hello({ name }: Props) {
return <div>Hello {name}</div>;
// 'name' type is missing in props validation
}
react/react-in-jsx-scope
Prevent missing React when using JSX
(JSX使用時にReactが欠落するのを防ぐ)
correct example
import React from 'react';
var Hello = <div>Hello {this.props.name}</div>;
react/require-render-return
Enforce ES5 or ES6 class for returning value in render function
(レンダー関数で値を返すためにES5またはES6クラスを強制する)
これもクラスコンポーネントの話なので割愛
ここから下はJSXについて
react/jsx-key
Report missing key props in iterators/collection literals
(key propsの欠落を検知する)
icorrect example
data.map(x => <Hello>{x}</Hello>);
correct
data.map((x, i) => <Hello key={i}>{x}</Hello>);
react/jsx-no-comment-textnodes
Comments inside children section of tag should be placed inside braces
(コメントがテキストノードとして挿入されないようにする)
incorrect example
return (
<div>// empty div</div>
);
correct
return <div>{/* empty div */}</div>;
react/jsx-no-duplicate-props
Prevent duplicate properties in JSX
(JSXでのプロパティの重複を防ぐ)
example
<Hello name="John" name="John" />;
react/jsx-no-target-blank
Prevent usage of unsafetarget='_blank'
(安全でないtarget='_blank'() の使用を防止する。)
安全でないtarget='_blank'って何？と思いました
target="_blank"の何が怖いのか
新しく開かれたウィンドウでJavaScriptのwindow.openerを使用し、親ウィンドウ（リンク元）を操作できてしまう点
以下のようなたった1行があるだけで、target="_blank"で新しく開かれたウィンドウから親ウィンドウを「hoge.com」へ遷移させることもできてしまう
window.opener.location="https://www.adc.com/"
この対策としてはrel="noopener"を設定することで解決できる
-
react/jsx-no-undef
Disallow undeclared variables in JSX
(JSXで宣言されていない変数を禁止する) -
react/jsx-uses-react
Prevent React to be marked as unused
(Reactがunusedとされないようにする)
incorrect example
var React = require('react');
// nothing to do with React
react/jsx-uses-vars
Prevent variables used in JSX to be marked as unused
(JSXで使用される変数が未使用とマークされないようにする。)
以上がeslint-plugin-reactのrecommendされているLintの内容