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

Google Sheets APIで誰でも編集できるスプレッドシートを作成する（Node.js / TypeScript）

## 結論

Google Sheets API だけじゃなくて、Google Drive API も使う

“`typescript
const sheets = google.sheets({ version: “v4”, auth: oAuth2Client });
const drive = google.drive({ version: “v3”, auth: oAuth2Client });

// スプレッドシートを作成する
const createdSheet = await sheets.spreadsheets.create();

// Google Drive APIでスプレッドシートの権限を作成する
await drive.permissions.create({
fileId: createdSheet.data.spreadsheetId,
requestBody: {
type: “anyone”,
role: “writer”,
},
});

// 誰でも編集できるスプレッドシートのURL
console.log(cre

JavaScriptで解決の順序を問わないasync/awaitでは、Promise.allを使う

# はじめに
JavaScriptにおける非同期処理は、APIを叩いたり、データベースへのアクセスな度を行う際に頻繁に用いられますが、コールバック関数をはじめとした非同期処理の構文は複数ある上に、仕組みそのものがやや難解な部分が多いと思います。今回はそのうち、async/awaitを使った非同期処理において、より迅速な処理を行うために[Promise.all](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)を使うパターンについて記録したいと思います。

# async/awaitについて
async/awaitは、ES8(ECMAScript2017)から導入された、非同期処理をより簡潔に記述するための記法です。async/awaitについて、MDNでは、以下のように説明されています。

### async
> async function キーワードは、式の中で async 関数を定義するために使用できます。
> 非同期関数は、 async funct

querySelectorAllとgetElementsByClassName

Javascriptで要素を取得する為の方法としてquerySelectorAllとgetElementsByClassNameがあることを知ったがどのように使い分けるかを考えられていませんでした。

・**getElementsByClassNameで得られるものはHTMLCollection**
・**querySelectorAllで得られるものはNodelist**
とのことで同じものではないがやっぱり何が違うかはわからない。

以下のブログでそれぞれの違いについてまとめて下さっている方がいらっしゃたので参考にさせていただきました。
https://javascript-k.hatenablog.com/entry/javascript_htmlcollection_nodelist　

キーポイントとしては動的 or 静的という点で先日自分が使用したケース（静的なwebサイト内の文章の日本語⇆英語の切り替えるだけ）であればquerySelectorAllで問題ないかなと納得できました。

仮に、文章の要素が増えるなどダイナミックになる場合はgetElementsByClas

Node.js ExpressのテンプレートエンジンでFailed to lookup viewエラーになった時はどうすればいいか？

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/nf2f1d837666e

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/post-restaurant-reviews/commit/8f808e48df501d8f12e99cf284bba7b405e50f31

WSH/JScript は Underscore.js で関数プログラミングの夢を見るか？

WSH/JScript + Underscore.js の環境で、オブジェクトが Recordset オブジェクト (ADO) かどうかをテストすることになった。

とりあえず一番最初に書いたバージョン

“` isAdoRecordset_take1.js
function isAdoRecordset( o ) {
if( _.isUndefined( o.CursorType ) ) return false;
if( _.isUndefined( o.LockType ) ) return false;
if( _.isUndefined( o.BOF ) ) return false;
if( _.isUndefined( o.EOF ) ) return false;
if( _.isUndefined( o.Fields ) ) return false;
return true;
}
“`

“`typeof(o.CursorType)===’undefined’“`
の代わりに“`_.isUndefined“` 使っただけ。

まあこれはこれで

ACDLを提唱します。その3

# 概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
plunkerで、jsonを読み込み、書き込みしてみた。
vuetify使ってみた。

# サンプルコード

“`
new Vue({
el: ‘#app’,
vuetify: new Vuetify(),
data() {
return {
search: ”,
logJson: [],
items: []
}
},
methods: {
async loadLog(event) {
const files = event.target.files || event.dataTransfer.files;
const file = files[0]
if (!this.checkFile(file))
{
alert(“ファイルを読み込めませんでした”)
return
}
const logData = await this.getFil

NCMBとFramework7を使った情報リスト画面コンポーネントの紹介と使い方

NCMBはモバイルアプリ開発におけるバックエンド機能（認証、データストア、ファイルストア、プッシュ通知など）を提供しています。バックエンドなのでAPIベースで利用するのが基本で、UI（アプリ側）は各自で開発する仕組みになっています。

現在、数多くのアプリが存在し、その中には定番とも言える機能があります。そうした定番機能を各フレームワークごとに実装しておくことで、再利用性高くNCMBが利用できるかと思います。

今回はFramework7で作った情報リスト画面コンポーネントを紹介します。Monacaアプリでも利用可能です。

## UIについて

コンポーネントは1つのHTMLだけで実装されているのが特徴です。そのため、基本的には以下の方法で導入・利用ができます。

1. 必要なSDKの読み込み
1. 必要なキーの取得
1. NCMBの初期化
1. 情報リスト画面の設置

用意されている画面（機能）は次の通りです。

## 情報リスト画面

![FireShot Capture 153 – 20220307133148 Information – localhost.jpg](http

Webの勉強はじめてみた その35 〜Sequelizeを使った実装〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回は第4章18,19節です。

## UUID
:::note
任意のIDを作る。全世界で同じ値を持つことがない一意な識別子。
:::

データベースのデータ型として、UUIDが用意されている。

Node.jsで使う場合はライブラリをインストールする。
“`
yarn add uuid@3.3.2
“`

## データモデルの作成
“`javascript:models/schedule.js
‘use strict’;
const {sequelize, DataTypes} = require(‘./sequelize-loader’);

const Schedule = sequelize.define(
‘schedules’,
{
scheduleId: {
type: DataTypes.UUID,
primaryKey: true,
allowNull: false
},
scheduleName: {
type: Da

Webの画面をPDFにしようとしてすべてが無に帰した話

先日こんなことを言われました

Webの画面をそのまんまPDFにして
DLしたい！！！

「（え、Webの画面なら印刷画面開いて
PDFDLしたらよくない・・・？？？）
わかりました！！！」

ということで考えていく

1.画面を画像として保存
2.メモリに保存した画像をPDFに変換

これで行こうと思ったのですが
画面の比率がひどいことになりました
原因は画像化する際に解像度が著しく落ちるためです
画像なんてひどくて
見れたもんじゃない

初期の白黒のテレビくらい画像がぶれています
現代っ子の僕にはとても見れたものではない

じゃあ
JavaScriptでごり押しできないか・・・？

調べたらたくさんありました
そういう便利なやつ

方法としては
Html2canvasでcanvasに画面を画像として保持
jsPDFでPDF出力
というお手軽簡単！！
キューピーもびっくり！！！

ということでやっていきましょう

以下はHTMLに埋め込むスクリプトです

“`javascript
function [任意の名前](){
html2canvas(document.queryS

React + TypeScript: Apollo Clientのリアクティブな変数(reactive variables)で複数コンポーネント間の状態を管理する

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿が解説するのは、GraphQLのクエリは用いず、ローカルの状態を複数コンポーネントの間でどう共有するかです[^1]。具体的には、リアクティブな変数(「[Reactive variables](https://www.apollographql.com/docs/react/local-state/reactive-variables/)」)の使い方になります(「[Local State Management with Reactive Variables](https://www.apollographql.com/blog/apollo-client/caching/local-state-management-with-reactive-variables/)」参照)。

# `useState`で状態をもつ簡単なカウンター作例
まずは、Apollo Clientは用

【個人開発】全部おれの声！？2歳娘のために簡易ゲームをつくった【React】

## はじめに

全国のパパ・ママエンジニアのみなさん。こんにちは。
2歳〜3歳くらいの子どもって動物大好きですよね？

わたしには2歳8ヶ月の娘がいるのですが、特にカピバラが大好きです。
そんな動物大好きっ娘のために簡易ゲームをつくりました。

## つくったもの

[Animal Sounds 〜おとあてげーむ！いきものどーれだ？〜](https://animal-sounds.cocoroworks.net/)

内容はとってもシンプル。
動物の音が流れるので、その音に合う動物（いきもの）を選択肢の中から選ぶゲームです。

## 作った目的（解決したい課題）
2歳といえば、いろいろなものに興味が湧いてくる年頃。
わたしの娘も例外でなく、まいにちさまざまなものに興味を示しています。

中でも、最近いちばん好きなのが動物。
毎晩のように動物図

【Vue.js】画像を圧縮、リサイズ、リネームしてダウンロードする

# 使用したライブラリ
browser-image-compression

https://github.com/Donaldcwl/browser-image-compression

file-saver

https://www.npmjs.com/package/file-saver

ここでは上記の2つのライブラリを使用する。

# ライブラリのインストール
npmもしくはyarnでインストール。
“`
npm install browser-image-compression
or
yarn add browser-image-compression
“`

“`
npm install file-saver
or
yarn add file-saver
“`

# 画像圧縮・リサイズ・リネーム・ダウンロードの流れ

1. フォームでの画像の選択時、画像をscriptで受け取る
2. 受け取った画像を圧縮・リサイズ・リネームする
3. 自動で画像をダウンロードする

“`vuejs:ImageResize.vue (template部分)