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

React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる

[Apollo Client](https://www.apollographql.com/docs/react/)はReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿でつくるのは、Apollo Client公式の「[Get started with Apollo Client](https://www.apollographql.com/docs/react/get-started/)」で紹介されている作例です。ただし、TypeScriptを採り入れ、アプリケーションは簡単にモジュール分けしました。

# Apollo Clientアプリケーションをつくる準備
Reactアプリケーションのひな形は、[Create React App](https://ja.reactjs.org/docs/create-a-new-react-app.html#create-react-app)でつくることにします。オプションとして`–template typescript`を加えれば、TypeScriptの環境が簡単に加わえられて便利です(「[C

JavaScriptのクラスと継承、オーバーライド

# クラスとは
クラスは***設計図***だとイメージしてください。

# クラスとインスタンス
クラスという設計図を作って、
それを元に作られたのが***インスタンス***です。

例えば車を1台作ればそれを元にいろいろな車を作れますよね。
そういうイメージです。

***クラスを１つ作ると、他のプロジェクトなどに流用できる***みたいです。

https://qiita.com/Hashimoto-Noriaki/items/e94a27c3d5d40ba4d41c

# クラスの定義のやり方
クラスを定義する時の定義のやり方です。

“`js
class ClassName {} //クラスの宣言
const instance = new ClassName();　//newでクラスのインスタンス作成
“`
実際のコードをみていきます。

“`js
//基地のクラスを定義
class Base {}

const base = new Base();

“`

⚫︎メソッドを定義
　クラスにメソッドを定義していきます。

“`js
class ClassName {

【async/await】JavaScriptで非同期処理を含んだループ

「非同期な処理が終わるのを待ち、処理完了したら１サイクル終了」といった操作を、指定回数だけ順番に繰り返したい…といった状況があり、理解の浅い非同期処理を実装するのに右往左往してしまったので備忘録。

簡便ですが開発環境は以下。
django: 3.1.4
OS: windows 10

# 最初にやらかした間違いコード
しょっぱな、「asyncを宣言時につけた関数はPromiseを返してくれる」という文言を見かけて、「じゃあasyncをつけた関数をawaitで待っていれば返り値が来るまで待ってくれるのか…？」と考え、こんなコードを書きました。（ずいぶん簡素ですが大枠だけ示しています）

“`javascript:間違いコード
let count = 3; // 繰り返し回数

func(); // 実行

async function func() {
// 非同期処理を含んだループ
for (let i = 0; i < count; i++) { await myFunc(); // 処理の完了を待つ con

2×2実正方行列で線形写像を体験する

# はじめに
この記事では，2×2実正方行列での線形写像可視化ツールを使って平面から平面への線形写像を体験します．このツールは線形写像の独学用の教育支援ソフトウェアです．
線形代数には1次連立方程式の理論と線形写像の２つの柱があります．このツールで体験できるのは線形写像です．1次連立方程式や内積は本ツールでは体験できません．また，学校で学習する逆行列や固有値の求め方，行列の対角化といったいわゆる計算スキルは身に付きません．本記事はこれらの計算方法は知っていて，線形代数の定期試験も合格点をもらえるレベルにあるけれど，どうにも概念が腹落ちしないとか，この行列の計算スキルに意味を見出せないという学習者に向けて，実2次元における写像を体験していただき，学校で学習したことの意味の理解を深めることを目的としています．想定レベルは大学低学年の線形代数です．
(**おことわり**)
本記事は線形代数の問題が解けるようになる計算スキルを習得するためのものではありませんでの，試験対策には使えません．
# 支援ツール
ツールの場所はここです．
[著者のサーバ](http://www.olt.tokyo/ma

Node.js + Express – ルーターモジュール内でパラメータに変数の値を入れてリダイレクトする

専門学校の授業で1年間情報技術の基礎やプログラミング言語の文法等を勉強してきたけど、フレームワークを使って実践的なプログラミングにチャレンジしたい。

そう思い立ち、実際にNode.jsのExpressで掲示板サイトを作成しながら勉強している中で、パラメータを含めたリダイレクトが上手く動作せず数時間費やしたので記録。
（手探り状態で進めているので圧倒的知識不足を痛感・・・）

## 掲示板の構造
掲示板のトップにはthreadから取得したスレッドの一覧を表示。
一覧の中のタイトルをクリックするとコメント一覧表示（/comments/:threadId）のページに移動する仕組み。

スレッド一覧からタイトルをクリックすると、スレッドのID（thread.id）をルートパラメータに指定して対応するコメントを取り出して表示する。
“`
[thread]
+——–+————-+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra

Rails × Vue.jsのSPAでTwitterのOGPを動的に反映させる方法

ご縁箱の実装で上手く情報を掴めず詰まった部分でしたため、
これからSPAで実装する方の役に立つかな？と思い、執筆いたしました。
クローラーについても知っておいた方が理解しやすいと思いましたので予備知識としてまとめています。

※ 間違っている点などございましたら、コメント欄でタコ殴りにしていただけますと幸いです。

## 目標： TwitterのOGP画像を動的に！！
ツイートのURLから出力される画像を切り替えることが出来ます。
Twitterで拡散されたいサービスを作る場合、工夫次第で大いに有効な手段になるかと思います。

ご縁箱もおかげさまでPV数が24,000を突破しまして、
サービス紹介記事のLGTM数も100を”超えそう”です（圧）

https://qiita.com/o83184206/items/dcab2743fea236f0aa67

それはさ

useSWRで躓いた話

# そもそもuseSWRとは？
**キャッシュからデータを返し、次にフェッチリクエストを送り、最後に最新のデータを持ってくる**という処理を行なってくれるもの。APIを通してデータの取得やキャッシュを簡単に記述する手助けをしてくれます。

## 使い方
“`
npm i swr
“`
でインストールし、ファイルの頭で宣言します。
“`
import React from ‘react’
import useSWR from ‘swr’

export default function Home() {
const fetcher = (…args) => fetch(…args).then(res => res.json())
const { data } = useSWR(‘/data.json’, fetcher)

return (

{data

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部分)