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

【Google Apps Script/Spreadsheet/Gmail】includes()で日付を比較する時に沼に陥ったので解決した方法をまとめておく。

Google Apps Scriptで条件を指定してメールを取得しSpreadsheetに記述するという時に新しいメールかどうかを日付で判断しようと思ってSpreadsheetにある日付を取得してリストにし、includesで比較したら何故か別のSpreadsheetではうまくいったのに、うまくいかな行ことがありその際に解決した方法をまとめておきます。

簡潔解決法をにいうと、

`Date.parse()`

を使って、リスト・Gmailから取得する日付ともに

`Thu Nov 11 2021 21:51:35 GMT+0900 (Japan Standard Time)`

上記形式から以下のように変換して比較しました。

`1636635095000`

その結果、includesでリストを比較できるようになりました。

Vue.js – 子要素をクリックした際に親要素のイベントを発生させない

子要素のクリックイベントに[イベント修飾子](https://jp.vuejs.org/v2/guide/events.html#%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E4%BF%AE%E9%A3%BE%E5%AD%90)のstopを付与します。

“`vue
new Vue({
el: “#vue”,
template: `

子要素

`,
methods: {
alertParent() {
console.log(‘親要素’)
},
alertChild() {
console.log(‘子要素’)
}
}
})
“`

Android 11 API30 以降に対応したアプリ開発用メモ

2021年11月からプレイストアの要件でターゲットAPIバージョンが30以降になったことに伴い、作業で躓いたポイントのメモです。

——-

## 前提
Android API30 の要件により、端末内へのアクセスなどをする場合は以降に記載する作業が必要になっています。
私の場合はアプリからブラウザを呼び出すために作業が必要でした。
[Android でのパッケージの公開設定のフィルタリング  |  Android デベロッパー  |  Android Developers](https://developer.android.com/training/package-visibility)

## AndroidManifest.xml への追記
プロジェクト名/android/app/src/main/__AndroidManifest.xml__
に必要な情報を追記します。
私の場合は以下を記載しました。
“`


【JavaScript】反復処理⑤　イテレーター

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/4ec6d1b885b5414c3360

#目的

* 反復処理についての理解を深める

#本題
###1.イテレーター

**イテレーター**とは反復操作を行う際に使用するオブジェクトのこと

**基本構文**

“`js
function genIterator(){
// 下記のgenIteratorに返却されている部分をイテレーターと呼ぶ
return {
// イテレーターは必ずnextメソッドを保持する
next: function(){
// オブジェクトを返却
return {
// ループを継続するかどうか
done: true/false,
// 返却する値

【GAS】noteの記事一覧のデータを取得

## note の記事をWPへ移管

結論から言うと移管は難しくて無理でした。
なので今回はnoteの記事一覧から取得してきたタイトル、投稿日時、抜粋、アイキャッチを、WP記事一覧ページ上に並べ、クリックするとnoteの記事詳細ページに飛ぶと言う仕組みにしました。今後はWPで投稿する予定なので一覧ページをシームレスにするために、noteから取得したデータをcontentのない記事としてWP投稿し並べたいと思います。

## noteの記事一覧APIをGASで叩く

noteのクリエイター記事一覧ページのjsonデータは
https://note.com/api/v2/creators/${username}/contents?kind=note&page=1
で取得(usernameにクリエイターIDを入れる)。

“`JavaScript

function myFunction() {
const sheet = SpreadsheetApp.getActiveSheet();
const userName = ‘hoge’; // クリエイターID
const ma

ざっくりReact Hooks入門①

### はじめに
今回からReact Hooksについてざっくりまとめていこうと思います。
その第一回目になります。

# useState
useStateフックは、React本体に関数コンポーネント専用の保存領域を作成してもらい、そこにあるデータを読み書きできるフックです。
構文
“` const[state, state更新関数]=useState(stateの初期値); “`

### 使用例
“`
import React, { useState } from “react”;

export default function App() {
const [count, setCount] = useState(10);

const decrement = () => {
setCount(count – 1);
};

const increment = () => {
setCount(count + 1);
};

return (
<>

Count: {count}

ざっくりReact Hooks入門②

### はじめに
今回はReact Hooksについてのまとめ記事の第二回目になります。

# useMemo
単純に値を保存するためのフックです。
useStateと違い、更新関数はありません。
例えば「重い計算だけど、何回やっても結果は同じ」値などを保存する使い道が便利です。要はキャッシュですね。
また、コンポーネントの再レンダー時に値を再利用できるため、値の不要な再計算をスキップできます。
値の不要な再計算をスキップすることで、パフォーマンスの向上を期待できます。

構文
“` useMemo(() => 値を計算するロジック, 依存配列); “`

依存配列は、値を計算するロジックが依存している値（値の計算に必要な値）が格納された配列です。
例えば、countという変数の値を２倍にした値をメモ化したい場合は次のようになります。

“` const result = useMemo(() => count * 2, [count]); “`
依存している値が更新されれば、値が再計算されます。
そのため、上記のコードの場合、countが更新されない限り、値が再計算されませ

ざっくりReact Hooks入門③

### はじめに
今回はReact Hooksについてのまとめ記事の最終回になります。

# useReducer
stateとdispatch（actionを送信する関数）を返すフックです。
このフックを利用すれば、コンポーネント内でstate管理ができます。
そのためuseStateと似たような機能を持つフックです。

構文
“` const [state, dispatch] = useReducer(reducer, stateの初期値); “`
戻り値のdispatchにactionを渡すとstateが更新されます。
引数のreducerによって更新のされ方が変わります。

### actionとは…
アクション（何が起きたか）ととそれに付随する情報を持つオブジェクトのこと。
例

“`
const action = {
type: ‘ADD_TODO’, // アクションタイプ
text: ‘Learning React’ // 付随情報
};

// useReducerの返り値のdispatchにactionを渡すと、actionが送信さてreduce

Next.js + microCMS構成のブログにChakra-UIを追加したらJavaScript heap out of memory

# ソースコード
[リポジトリ](https://github.com/Ibuki-Matsumoto/sample-next.js)
初学者が初めてのエラーで発狂し泥沼に沈んだ様子を記しています。笑ってください。

## ことの発端

* なんかChakra-UIよさそうやん！
* ファッ！？インストールしたら`npm run dev`できへんやん！？？

“`
<--- Last few GCs --->

[25700:0000000000656F00] 43929 ms: Scavenge (reduce) 4070.6 (4140.1) -> 4070.5 (4140.9) MB, 6.9 / 0.0
ms (average mu = 0.442, current mu = 0.263) allocation failure
[25700:0000000000656F00] 43937 ms: Scavenge (reduce) 4071.6 (4140.9) -> 4071.4 (4141.6) MB, 7.0 / 0.0
ms (average mu

【DOM操作(前編)】JavaScriptのaddEventListenerについて、「・・したら」をまとめてみた

今回はJavaScriptのDOM操作の
「addEventListener」
についてまとめてみました。
DOM操作初心者の方のご参考になれば嬉しいです。

###基本的なDOM操作(addEventListener)の流れ

①まずは要素の取得。
②取得した要素に**addEventListener**で処理を追加する
**→ このaddEventListenerの第一引数と第二引数が重要です**

**③処理の”きっかけ(第一引数)”を記述**
**→⭐️今回のメインはこの③になります。**

④”処理を関数内(第二引数)”に記述
→→**※こちらは次回(後編)で紹介します…**

※慣れている方は①②は飛ばしてOK

##①要素を取得する
DOM操作をする上でま

【Vue.js】チェックボックス

#はじめに
こんにちは！
今回は【Vue.js】でのチェックボックスについてアウトプットしていきます！

#チェックボックスについて
・単体のチェックボックスは`boolean`を使用
・複数のチェックボックスは配列`[]`を使用

#書き方・解説

（例題）チェックを入れたら`true`と`false`が入れ替わるプログラムを書いていきます。

##単体

“`HTML:HTML

{{ checked }}

{{ $data }}

“`
“`Vue.js
data: {
checked: false
}
“`

`data`オプションに`checked:false`を設置します。
<テンプレート側>

チェックボックスを設置し、`v-model=”checked”`で`checked`と双方データバインディングさせます。
そしたら`id=”check

Angular,React,Vueなど技術選択において人気度の軸で調査する時の情報ソース

人気度調査の根拠となる情報ソースを網羅的にまとめていただいているサイトがあり
備忘録のため記載します。

## どのフロントエンドフレームワークが最も人気があるか
こちらの記事では、世界でどのフロントエンドフレームワークが最も人気があるか議論されています。

https://gist.github.com/tkrotoff/b1caa4c3a185629299ec234d2314e190

以下の17の情報ソースから考察されています。
・Stack Overflow Trends
・Stack Overflow survey
・stateofjs.com survey
・JetBrains survey
・NPM downloads
・NPM packages depending on
・GitHub “Used by”
・GitHub topics
・Reddit metrics
・Twitter
・Hacker News Hiring Trends
・Indeed
・Developer Tools
・Google trends
・YouTube
・SimilarTech: mar

JavaScriptのthisってなんだ？

#はじめに
この記事は備忘録を兼ね、初学者の方を対象に書いたものです。

内容や表現に誤りがあればご指摘いただけますと幸いです。

#この記事について

JavaScriptを学んでいるとサラッとよく出てくる「this」。
なんとなくは分かるけど、少し正体がつかみにくいですね。

この記事ではそんな「this」の基本、挙動について解説します。

なお、アロー関数の中ではthisの振る舞いがまた変わりますので、
それについては今度別の記事にまとめます。

#そもそも「this」ってなに？
「this」というのはあらかじめ用意されている特別な変数です。
thisは関数の中でのみ使用されます。

ここで一度thisの基本についてざっくり説明すると、
「thisは関数のスコープ内で有効な特別な変数であり、
その関数を保持しているオブジェクトへの参照」
となります。

ちょっとよくわかりませんよね。

すごく大雑把に説明すると、thisは自身を保持している関数の親であるオブジェクトへの参照を持っています。

一応説明しますと、参照を持っているというのは、「このオブジェクトが親だよ！」という情報を

Vuetifyのv-calendarAPI（１日表示、１週間表示）で同じ時間帯のイベントが１１個までしか表示できない問題の解決策

#Vuetifyのv-calendarAPIの仕様？
vuetifyのv-calendarAPIを使用した際に、同じ時間帯のイベントを12個以上追加してみたときのこと。
表示されたカレンダーにはイベントが11個しか表示されていなかった。
開発者ツールで確認すると、存在はしているが、ほかの要素と被っているっぽい
（見にくいかもしれないが、イベントの**div**要素の**style**の中の**left**が同じものが複数ある）
ここの**left**を

Laravelのjsファイル読み込み

jsファイルは基本読み込んで使う
public/js配下にjsファイルを作成

↓bladeで読み込む

“`blade.php

“`

BotUIでチャットボット開発（DB編）

## はじめに
[前回投稿した記事](https://qiita.com/t_power/items/e966b4a5f35340ed9a41)の続きで、BotUIを使ったチャットボットを、DB化した話になります。
BotUIって何？どんなチャットボットを作ったの？という方は前回の記事をご覧ください。

## DB化の背景と目的
前回はJavaScript、CSS、HTMLで簡単なシナリオ型のチャットボットを作成しました。
そこでは質問文がまとめてあるjsファイルと、回答文がまとめてあるjsファイルを用意しました。

チャットボットをリリースしたところ、質問文と回答文（以降、シナリオと表記）に、度々修正が加わることが分かりました。

前回のままだと、担当者が直接jsファイルを編集する必要がありました。
また、シナリオが増減すると、分岐ロジックを修正する必要もありました。

シナリオ変更の度にソースコードを修正するのはよくないので、シナリオをDBへ切り分けることにしました。
（前回記事でいうところの、「answer.js」と「bot.js」を廃止しました）

## 作業環境

OS: W

【リベンジ】「何食べたい？」に対して「なんでもいい」以外の言葉、探してみませんか？#Webアプリ #料理 #献立 #家庭内戦争回避 #夕飯戦争回避

:warning:**家庭内戦争**:warning:を回避したく、[前回の記事](https://qiita.com/yui-kouy/items/5dc0db657e29e677bed6)にて投稿していましたが、今回[Bootstrap](https://qiita.com/yui-kouy/items/f52e6715843f760bc617)を使用して使い勝手等を良くしたいと思ったのでバージョンアップいたします。
「同じブラウザであれば」という制限付きですが簡単にデータを保存しておける設定を追加しています。

#リベンジ「なんでもいい」以外の言葉を探すために！
アプリをバージョンアップしました！
前回よりはシンプルにはなりましたが見やすくなったのではないでしょうか？
どうぞお使いください:sparkles:

https://thirsty-jepsen-b2a5e1.netlify.app

#アプリ全体図#
React + TypeScript: react-useのuseDebounceでコールバックの呼び出しを間引く

# コールバックの呼び出しを間引く
コールバックが続けざまに呼び出されるとき、ひとつひとつを実行せず間引きたい場合があります。よくあるのは、テキストフィールドへの入力です(あるいは、スクロール時の処理など)。ひと文字ごとに実行するのでなく、ひと息ついたとき直近の値で処理できれば、負荷が下げられます。

そのようなときに用いるのが、[debounce](https://iwb.jp/javascript-throttle-debounce-event-thinning-process/#debounce)と呼ばれるテクニックです。立て続けに呼ばれるコールバックをすぐには実行せず、呼び出しが止んで一定時間が経ったら、最後のコールバックを実行します。そのために、[react-use](https://github.com/streamich/react-use#——————–react-use——————)に備わるフックが`useDebounce`です。

# `useDebounce`の公式コード例
GitHubの[`useDebou

Nuxtでサイトルートをドキュメントルートでなく、サブディレクトリに配置する方法

# 概要
`npm run generate`したもの(通常は`dist`)をサイトルートを**ドキュメントルートでなく**、
その配下の**サブディレクトリに配置**する方法を記載します。

## 環境

### 1.Nuxtプロジェクトの準備

以下のようにコマンドを叩いてnuxtをinitしておく。

“`
> cd project_name
> npx create-nuxt-app dev
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in dev
? Project name: dev
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Vuetify.js
? Nuxt.js modules: Progressive Web App (PWA)
? Linting tools: ESLint,

今から始めるRedux x React x TypeScript

#はじめに
Reduxを業務で使う必要性が出てきたのですが、調べても古い記事や分かりづらい記事しかなく苦労したので備忘録としてまとめておきます。

#前提
Reactの基本的な部分が分かる
TypeScriptの基本的な部分が分かる
javasriptのES6の基本的な部分が分かる
stateの基本的な概念が分かる

#用語の定義
Reduxは非常に分かりづらく、その原因となっているのが用語の多さだと思います。新しく用語が登場したら説明しますが、読む前に用語の定義に目を通しておいてください。ここではなんとなく用語の意味を理解してもらうことを目的としているので、とても簡潔に書いています。

**Redux**
状態管理ライブラリ

**state**
アプリケーションが保存しておきたい状態

**store**
状態を保管しておく場所

**action type**
状態に対してどのような操作をしたいのかを識別するための記号。

**payload(ペイロード)**
状態への操作に必要な引数

**action**
通常action typeとpayloadをもつオブジェクトのことを指