😁

フロントエンド Tips集

2021/12/14に公開約2,800字

フロントエンドのTipsを書き連ねる記事

毎回調べるのめんどくさいので業務で使用したフロントエンドのTipsをどんどん追加していきます。
書きなぐりなので見づらいところがあるかも・・・

フッター下固定

mainの要素が少ない時にフッターを下固定にする。

<html>
<body>
<div class="main">
	<header></header>
	<div class="main__inner"></div>
	<footer></footer>
</div>
</body>
</html>
html,body {
	min-height: 100vh;
}

.main {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.footer {
	margin-top: auto;
}

クリックやタップしたときに青くなる現象

-webkit-tap-highlight-color:rgba(0, 0, 0, 0)

ツールバーやアドレスバーで要素が隠れてしまう

bodyにinnerHeightを設定する。

// 読み込み時にbodyにウィンドウの高さを指定
document.body.onload = ()=>{
    document.body.style.minHeight = window.innerHeight + 'px';
}

// 横向きにした時に再度高さを指定
let timer;
window.addEventListener("resize", () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
	document.body.style.minHeight = window.innerHeight + 'px';
    }, 500);
});

ライブ配信のコメントビュワー

YouTubeのようなライブ配信のコメントビュワーをCSSのみで実装
※スクロールができないので注意
※liをDOMで追加していく

<html>
<body>
<div class="main">
	<header></header>
	<div class="comment-viewer">
		<ul class="comment-viewer__list">
			<li class="comment-viewer__item"></li>
			<li class="comment-viewer__item"></li>
		</ul>
	</div>
	<footer></footer>
</div>
</body>
</html>
.comment-viewer {
	position: absolute;
	top: 40%;
	right: 40px;
	bottom: 24px;
	left: 16px;
	overflow: hidden;
}

.comment-viewer__list {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: auto;
}

.comment-viewer__item {
	width: 100%;
	margin-bottom: 4px;
}

ベーシック認証がかかったURLにリダイレクトする方法

<a href="https://ユーザー名:パスワード@hogehoge.jp">

連想配列 キーでグループ化

var foods = [
	{'name':'Apple', 'category':'fruits'},
	{'name':'Strawberry', 'category':'fruits'},
	{'name':'Tomato', 'category':'vegetables'},
	{'name':'Carot', 'category':'vegetables'},
	{'name':'water', 'category':'drink'},
	{'name':'beer', 'category':'drink'},
];
var expected = {};
foods.map(function (i,j) {
	var cat=i["category"];
	if(typeof expected[cat]=="undefined") expected[cat]=[];
	expected[cat].push(i);
});
console.log(expected);

【Vue】エラー対処法:[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"

Vueで以下のようなエラーが発生したときのの対処法。

[Vue warn]: Error in render: "TypeError: Cannot read property 'xxx' of undefined"

受け取るデータをnullチェックする。

{{ (item || {}).xxx }}

vueでソートを実装

■逆順にソート

computed: {
	// 配列の要素順番を逆順にする
	reverseItems() {
		return this.items.slice().reverse()
	},
}

■指定したキーでソート

computed: {
	// amountで並べ替え
	sortedItemsByAmount(){
		return this.items.slice().sort((a, b) => {
			return (a.amount < b.amount) ? -1 : (a.amount > b.amount) ? 1 : 0
		})
	}
}

vueでv-forで指定回数分だけ回す

配列の1~3番目まで

v-for="(item, index) in items" v-if="index > 0 && index < 4"

配列の0~4番目まで

v-for="(item, index) in items" v-if="index >= 0 && index < 4"

Discussion

ログインするとコメントできます