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

GAS の API に js の fetch で doPost する

GAS の API に js の fetch で doPost する際に
地味にハマったのでメモ。
まずは、正常に動作するもの。

“`js
fetch([post url], {
‘method’: ‘POST’,
‘body’: JSON.stringify([post obj]),
“Content-Type” : “application/json”
})
.then(response => {
return response.json();
})
.then(json => {
// レスポンス json の処理
})
.catch(err => {
// エラー処理
});
“`

GAS 側はこんな感じ

“`js
function doPost(e) {
log(“doPost e.postData.contents = ” + e.postData.contents);

let ret = {
“message” : “success”,
};

return ContentService.createText

ついにTypeScriptがブラウザで動くようになりそう

ついにTypeScriptの構文がJavaScriptに組み込まれ、ブラウザで直接TypeScriptが動くようになりそうです。

A Proposal For Type Syntax in JavaScript

https://github.com/giltayar/proposal-types-as-comments/

# TypeScriptとは何か？

TypeScriptと言っても、指し示す範囲が文脈によって異なります。筆者が観測した範囲では、以下の3つが「TypeScript」だと言われているようです。

– 言語としてのTypeScript（`const a: number = 1`のような構文を持つ言語）
– 型チェックをおこなうCLIツール（tscコマンド）
– 型チェックやトランスパイルを行うライブラリ（microsoft/TypeScriptリポジトリ）

この記事で触れるのは、**言語としてのTypeScript**の話です。`const a: number = 1`のよ

Typescriptでメソッドチェーン可能なオブジェクトを作る簡単なサンプル

# 簡単なサンプル
“`typescript
const calc = {
result: 0,
add(x: number) {
this.result += x;
return this;
},
print() {
console.log(this.result);
},
};

calc.add(2).add(3).print(); // 5
“`

thisを返すといい感じにつなげられる。
自分自身を返さなくても、メソッドチェーン自体はできる。

# 初期値ありのサンプル
“`typescript
const calc = (init: number) => ({
result: init,
add(x: number) {
this.result += x;
return this;
},
print() {
console.log(this.result);
},
});

calc(10).add(2).add(3).print(); // 15
“`

初期値が必要な時の書き

TypeScriptでのexportなどメモ

# tsでのexport,importなどのメモ
これは、情報の共有とかでなく
個人的なメモです。
細かいこと知りたい人は、ほかの方の記事を参考にしてください:bow_tone1:

## import
ライブラリのインポート時に使用する。
“`ts
import {hogehoge} from ‘HOGE’

//　自作したライブラリは
import {zisaku} from ‘./myLibrary’
//　自作したライブラリのdefaultで設定されていれば
import mylib from ‘./myLibrary’

“`
これは、基本的なので忘れないと思う。

## export
ファイル内の関数などを外部ファイルでも使用できるようにするために宣言する

“`ts
export const hogehoge1=()=>{
return “test”
}

export default function hogehoge2(){
return “test”
}
“`
関数の前に宣言する
基本的なので、忘れない….と思う

### まとめる

【１日目】ボタンを押したら何かが表示されるプログラムを作る

# ０.はじめに
この記事はプログラミングの特訓をしている高専4年生(もうすぐ5年生)がその日勉強した内容を記録していきます。
何か月か続く予定。

# １.本日の課題
今日はHTMLとJavaScriptを使ってボタンを押したら何かを表示させるプログラムを作成する。
HTMLもJavaScriptもあまり触ったことがなくネットを参考に自分なりに書いてみた。

“`html

“`

このプログラムを先生に評価してもらったところ次の改善点を告げられた。
***
– id名はどういった役割かの名前にす

Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ

こんにちは！[やむちゃ(@hpfull_01)](https://twitter.com/hpfull_01)です！

今回は私が[運営するサイト](https://hpfull.jp/)のような、Next.js×microCMSのサイトが一人で作れるようになるまでのヌクヌクロードマップを解説していきたいと思います。
この記事の通りに学んでいけば自作のホームページやポートフォリオサイトが無料で構築できます！！
ぜひ最後までご覧ください。

※私自身もひよこエンジニアです。それ違うよ！とかここはこう勉強した方が効率いい、などあればどしどしコメントorDMください!!!

最初に、ロードマップ作成に参考にしたサイトです。フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。英語で書いてありますが、時間のある時に見ておいてください。
https://roadmap.sh/frontend
フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめ

オンラインの二酸化炭素排出量を削減する！環境に優しいウェブサイトの作り方とは？

環境に配慮したグリーンなウェブサイトを構築することで、持続可能性の向上に貢献できることをご存知でしたか？

著者：Magda T. 2021年10月14日
原文：https://bejamas.io/blog/how-to-build-eco-friendly-website/


>目次
>1. 環境に配慮したウェブサイトとは？
>2. はじめに：環境に配慮したウェブサイトの構築
>3. 環境配慮型技術への移行

気候変動の影響が懸念される中、環境に配慮したウェブサイトは、エネルギーを節約し、オンライン利用で二酸化炭素排出量に与える影響を軽減することができます。

The Shift Projectの報告書によると、世界の温室効果ガス排出量の3.7%をオンライン利用が占めていると推定されており、これは航空業界が排出する量とほぼ同

特定の単語を固定して検索！ 検索効率向上！ プログラマー向け検索サイト

# 紹介
検索効率**爆上がり**のサイトを作ってみた！プログラマー向け！（ほかにも用途があるかも!?）
http://emc2games.starfree.jp/searcher/
https://github.com/tomato645/Useful-Searcher-For-Developer
Tweets by tomato645P
（↓実際のサイトのイメージ）

# 使い方
* ①固定する言葉言葉を入力します。
例えば、html,js,css,python 数学、国語など…

* ②検索指定言葉を変更する言葉に入力します。
例えば、タイマー 作り方、人工知能、三角関数など…

# 利点
* 入力欄が分離しているので、入力のし直しの回数を削減することができます。
* 新しいタブを開く仕組みなので

CoffeeScriptのメモ

たまに業務で使うのですが、忘れてしまうのでメモ。

# CoffeeScriptってそもそも何？

私も今の会社に入って初めて聞きましたが、昔流行っていたJavaScriptにコンパイルされるプログラミング言語です。
JavaScriptを簡略化して書けるみたいですね。

# コメント
“`Text:コメント
# コメント

###
複数行コメント
###
“`

# 変数
“`CoffeeScript:CoffeeScript
hoge = “hoge”
“`
変数宣言のキーワードとセミコロンが必要ありません。

# 配列
“`CoffeeScript:CoffeeScript
array = [
“aaa”
“bbb”
“ccc”
]
“`
変数宣言のキーワードとカンマとセミコロンが必要ありません。

# メソッド
“`CoffeeScript:CoffeeScript
hoge = ->
alert “アラート”
“`
引数を使用する場合は下記
“`CoffeeScript:CoffeeScript
hoge = (fuga)->
alert

Webの勉強はじめてみた その36 〜Sequelizeでデータ削除とCSRF脆弱性の対策〜

N予備校「プログラミング入門Webアプリ」を受講しています。
今回が最後、第4章20〜24節です。

## Sequelizeを利用したデータの削除

テストデータの一括削除。

“`javascript
function deleteScheduleAggregate(scheduleId, done, err) {
Availability.findAll({
where: { scheduleId: scheduleId }
}).then(availabilities => {
const promises = availabilities.map(a => { return a.destroy(); });
return Promise.all(promises);
}).then(() => {
return Candidate.findAll({
where: { scheduleId: scheduleId }
});
}).then(candidates => {
const promi

AWS CDK + AWS Lambda + Lambda Layers + JavaScript + VSCode 構成例

# TL; DR

– VSCode に分からせるには tsconfig.json の paths
– CDK に分からせるには bundling.externalModules

# 先行研究とか資料

– https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/configuration-layers.html
– https://qiita.com/hrkzmaaa/items/afcf08a549c03e23e8a9
– https://qiita.com/hibohiboo/items/b33c530a5a3e8a9c7411

## 重要な知識

### Lambda layer は /opt 以下にマウントされる

例えば `./layers/app-base` 以下にファイルだのフォルダだのたくさん置いて、このように指定したとします

“`javascript:stack.js
const lambda = require(‘@aws-cdk/aws-lambda’)

const layer = new lamb

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 {

【Django/async/await】JavaScriptでfetchなどの非同期処理を含んだループを順番に実行したい

（編集履歴）
|日付 |内容 |
|—|—|
|2022/3/9 |@standard-software さんからのご指摘を受け、状況説明をより詳細にし、これに合わせてタイトルに文言を追加しました。 |
—

djangoを使った開発をしていて、「クライアント側からサーバー側にfetchなどでリクエストを送って、時間のかかる処理が終わるのを待ち、処理完了したら１サイクル終了」といった操作を、指定回数だけ順番に繰り返したい…こんな状況に出くわし、理解の浅い非同期処理を実装するのに右往左往してしまったので備忘録。
fetchを使う理由は、サーバーからのリクエストを受け取るときに、画面を再ロードしなくて済むようにしたいので、非同期処理としています。

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

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

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