JavaScript関連のことを調べてみた2022年01月13日

【React】【Vue】 など流行りのフレームワークを使うもののためのJS基礎 [this, call(), apply(), bind()]

this

thisは、その関数を呼び出しているオブジェクト
グローバルスコープで呼び出した場合は、グローバルオブジェクト
javaScriptは一番外におおきなグローバルオブジェクトで囲まれているため。

bind()

thisが参照するオブジェクトを指定する

※

“`typescript

const myButton = {
content: ‘OK’,
click() {
console.log(this)
console.log(this.content + ‘ clicked’);
}
};

myButton.click();

//コンソール
{ content: ‘OK’, click: [Function: click] }
OK clicked

“`

この場合のthisはmyButtonのオブジェクトを示している

では次の場合はどうなるだろうか

myButtonクラスのメソッドを変数looseClickに代入している

“`typescript

const m

Warning: React has detected a change in the order of Hooks called by X　でハマる

# 何をしていたか（悪いコード）
　React Native で、とあるアプリで、アカウント情報を表示する画面を作成していた。
　ReactNavigation を利用していた。

　処理の概要は以下

“`javascript
export default function MyPage {
// ユーザ情報
const [user, setUser] = useState();

// ユーザ情報取得処理（あとで再利用する）
const userCheck = async () => {
const user = await getUser();
setUser(user);
}

// 画面表示開始時に一度だけ読み取る
useEffect(userCheck, []);

// ユーザ情報がなければ処理中を表示
if (!user) {
return (
処理中
);
}

// ここから本画面　画面遷移用にnavigation 確保
const navigat

Webページの配色をユーザーが選択するJavaScript

過去にWebシステムの管理画面を作った際に、管理画面としては無難な配色でリリースしたのですが、
一部の利用者からページの色合いがイマイチ気に入らない、といった意見をいただきました。

一部の意見で配色を変更したとしても、別の一部から同様の意見が出ないとも限らないため、
だったら各自で好みの配色を選択できるようにしてしまおう！

ということで、JavaScriptでそんな機能を作ってみました。

## HTML

まずはHTMLです。
青、緑、赤の各ボタン押下をすることで、
<ul>のメニュー部分と<h1>の見出しの配色を変更することとします。
<button>のvalue値に配色コードを持たせています。

“`html:sample.html