2020/07/29

Web開発初心者なので、HTML・CSSなどを再検索しなくて済むように備忘録を残す。

本サイトのコードは自由にお使いいただけますが、それによって生じた不利益に対して責任を負いません。
自分でコードを確認・他のページとの比較をしながらお使いいただけたら幸いです。

例として記述するのは以下の環境とする。

React

JSX(TypeScript)

SCSS

setState()の順番が変

setState()が定義した順に動作してくれていなくて調べてみると、setState()は非同期で動作するらしい。つまり、順番に動作して欲しい場合は、一気にsetState()でやりたいことを定義する必要がある。ちなみに、setState()後に任意の動作を行いたい場合も、並べて描くだけでは順番がおかしくなる。

以下のようにすることで、好みの順番で処理を定義することが可能。

this.setState( (state:any) => {
	let st1 = 1;
	let st2 = 2;
	return {st1, st2};
	}, () => {
	// ここには、setState()後の動作を記述できる。
});

TypeScript（もしくはJavaScript）でリストのコピーができない。

通常の考えでいくと、以下の書き方でコピーできるように感じる。

const a = [1, 2, 3, 4];
const b = a;

しかし、これでは参照をコピーしているような挙動をしてしまう。

const b = [...a];

長い横線

<hr />

リスト表示

ulやliの中央寄せがうまくいかない

ul {
	list-style: none; // リストの前の点を無効化
	display: inline;
}

横並びを中央揃え

li {
	display: inline-block;
	div {
		align: center;
		float: left;
	}
}

クリックできる画像を配置

inputタグにはimageタイプがあり、onClick()も定義できるので、クリックできる画像を配置することができる。

<input type="image" src={national_flags.jp} onClick={()=>{this.setState({locale:'jp'})}} />

hoverなどのアクションを遅延させる

	transition-delay: 2s;

モバイルにのみ適用させるCSS

@media ... () {}は、条件文を記述することができ、画面サイズで指定することで、（たぶん）モバイルのみに適用されるCSSを書くことができる。画面サイズは、これでいいか分からないので、適宜調べてもらえるとありがたい。

@media only screen and (min-width: 414px) {
	&:hover {
		background-color: #00bbf0;
		color: white;
	}
}

モバイルでhoverを無効

iPhone7で確認する限りだと、hoverの動作がおかしい。応急処置としては、hoverの前にメディアクエリ(?)を追加して、モバイルのディスプレイサイズでは動作しないようにした。

@media only screen and (min-width: 414px) {
	&:hover {
		background-color: #00bbf0;
		color: white;
	}
}

オブジェクトのキー一覧を取得

Objectは、変数名ではなくそのまま記述する点に注意

const data = {
	'key1': 'val1',
	'key2': 'val2',
};

Object.keys(data);
//NG: data.key();

多言語対応

サイト内の文字を多言語に対応する。何も考えずにページを作成すると、ページ内の文字はそのまま書き込むことになるはずである。しかし、それだと多言語対応が難しい（と思う）。

対策としては、文字を一つのオブジェクトにして、'jp'や'en'などの言語にあたるキーを途中に挟むことで、後から多言語対応しやすくなるだろう。文字をこのように配置するのは、サイトが大きくなればなるほどコストが上がる。

const messages = {
	'greeting':{
		'jp':'こんにちは',
		'en':'Hi',
	},
	'bye':{
		'jp':'さようなら！',
		'en':'see you!',
	}
}

iOSのダブルクリックズーム無効化

応急処置として以下を使用した。

* {
	touch-action: manipulation;
}

モバイルのアドレスバーを考慮した縦サイズ

シンプルなSPAにおいて、スクロールしない縦サイズにしたい。 100vhにすると、アドレスバーを含めない（消えた状態の）長さを取得するため適切でない。以下のCSSを親エレメント（？）に与えると、アドレスバーも考慮した縦サイズを取得してくれる。もちろん、PCでも問題なく動作する。

.App {
	height: 100%;
}

idのセレクタ

id="..."のCSSを設定するときは以下のようにする。

#name {
	// css
}

アプリが計算資源を喰らい尽くす

よほど膨大なアプリか、よほど貧弱なマシンでもない限り、求める動作とは違った挙動をしているだろう。 componentDitUpdate()の中でsetState()を用いると、無限再帰（？）のような現象が起こる。おそらく、componentDidUpdate()の中のsetState()をトリガーとしてcomponentDidUpdate()が呼ばれていると考えられる。

componentDidUpdate = () => {
	this.setState({ ... }); //NG:無限再帰
}

stateをローカルストレージに保存し、ページを再度開いた時にロードする

componentDidMount()で、ローカルストレージからJSONをstringに変換したものを読み取ってsetState()する。 componentDidUpdate()で、コンポーネントが更新された時にローカルストレージに保存する。

componentDidMount = () =>  {
	this.setState( JSON.parse(localStorage.getItem(APPKEY) || '{}'));
}
componentDidUpdate = () => {
	localStorage.setItem(APPKEY, JSON.stringify(this.state));
}

firebaseとAnalyticsとの連携がうまくいってない

デプロイしてAnalyticsとの連携を確認しても、何も表示されなかった。チュートリアルに沿って作業を進めた場合は、問題なく動作するはずなので、とりあえず時間が解決してくれるのを待った方が良いだろう。私の場合は、ラグがあったようで、寝て起きたら無事動作していた。

npm audit fixの意味がわからない

$ npm installを実行した時に、うまく動作せず、末尾にrun npm audit fixと出力されている。言われた通り、npm audit fixを実行しても、WARN: <package-name>@x.x.x requires a peer of <other-package-name>@^x.x.x but none is installed.と出てきてしまう。

この警告が出ないようにするためには、依存関係を満たす必要がある。他のやり方もあるかもしれないが、手動でパッケージをインストールすれば警告がなくなった。

$ npm install <other-package-name>

Web開発の備忘録＆Tips