JavaScript関連のことを調べてみた2021年08月03日

Vue.jsでブラウザバックを検知する方法

## 概要
ブラウザバックを検知して、Vue.jsのプロパティに論理値をセットすることによってVueコンポーネント内でブラウザバックしたかどうかを判定できるようにする。

## プログラム
### Vue.jsのプロパティに「$browserBackFlg」をセット

“`js:app.js
// ブラウザバックを検知してコンポーネントで「this.$browserBackFlg」で使用できるようにする。
Vue.prototype.$browserBackFlg = false
history.replaceState(null, ”, null)
window.addEventListener(‘popstate’, function() {
Vue.prototype.$browserBackFlg = true

window.setTimeout(() => {
Vue.prototype.$browserBackFlg = false
}, 500)
})
“`

#### `history.replaceState(stateObj, title

[gulpエラー] gulp-sass 5 does not have a default Sass compiler

# 状況
1年くらい放置してたプロジェクトを進めようとnpm runしたら、前は問題なく動いていたのに急にこんな風に怒られちゃいました…。

“`
Error in plugin “gulp-sass”

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

var sass = require(‘gulp-sass’)(require(‘sass’));
“`

# 原因
どうやら2021年7月に[gulp-sass](https://www.npmjs.com/package/gulp-sass)がversion 4から5へとメジャーアップデートされた際に、プラグインの読み込み方も変更されたようです。

# 解決法
エラーでも紹介されている通り、sassの読み込み方を変えます。

まずは ` npm i

【JavaScript】Dateオブジェクトの使い方

# はじめに
アウトプットが苦手な自分が練習の一環として記事を書いてみる。

第二回目です。

以前Dateオブジェクトを使った日付の加算で少し躓いたところがあったので、
それについて記事を書こうと思ったのですが、
その前にまずは`Dateオブジェクトの簡単な使い方`について書いていきたいと思います。

# 現在の日時を取得する
new Date()を使用することでDateオブジェクトを生成します。
引数を指定しない場合、現在の日時でオブジェクトが生成されます。

“`javascript:現在日時を取得
const date = new Date();

console.log(date);
// 実行結果
// 2021-08-02T03:46:44.601Z
“`

# 任意の日時を取得する
先ほどのnew Date()に引数を指定して生成します。
指定の仕方は以下の3種類あります。

– 年月日時分秒ミリ秒（年月日のみ指定など省略可）
– 文字列
– 1970年1月1日(UTC)からの経過ミリ秒数

“`javascript:任意の日時を取得
// 年月日時分で指定
co

正しいuseCallback()の使い方

今回、useCallbackを理解する上で、参考にさせていただいた記事がこちらです。
[Your Guide to React.useCallback()](https://dmitripavlutin.com/dont-overuse-react-usecallback/)

こちらを翻訳してまとめたものになります。掲載許可済みです。
Dmitri Pavlutinさん、ご協力ありがとうございます?
「Good luck in your journey to mastering Frontend development!」
と、とても優しい方で、すっかりファンになってしまった。

## その前に、関数の等価性チェックを理解する。

“`jsx
function factory() {
re

javascript オブジェクトの参照とコピーについて

##挨拶
@hakeと申します。初投稿です！
オブジェクトの参照とコピーについて勉強し直したので記事にしました！
知っている方も復習する気持ちで読んでいただけると嬉しいです！

##以下のコードには問題があります！
“`Index.tsx
const [team, setTeam] = useState({
engineer: { reader: “kazu”, member: [“eita”, “yasu”] },
designer: { reader: “satoshi”, member: [“keita”, “tadashi”] },
});

// bad
const setEngeneerReader = () => {
// スプレッド構文でteamをコピーする
const newTeam = { …team };
// 深くネストされた値を変更する
newTeam.engineer.reader = “koki”;
console.log(
“prevReader”,

Vue.jsでプレビュー付きの画像アップロードを作った。

# はじめに
おはようございます。こんにちは。こんばんは。
Watatakuです。
今回はVue.jsでプレビュー付きのよくある画像アップローダーの作り方です。
⬇︎画像の選択後

# 対象者

– Vue.js初学者。

# 環境

– node.js: v15.11.0
– npm: v7.6.0
– @vue/cli: v4.5.13
– vue: ^2.6.11

# 作り方

“`vue