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

console.log()だけじゃない　consoleオブジェクトの便利なメソッド

# はじめに
JavaScriptで開発を行っている際にconsole.log()で値を確認することがよくあると思いますが、consoleオブジェクトには便利なオプションがあることを見つけたので備忘録として残します。

# 1,console.error()
console.errorのメソッドではメッセージを赤色で強調表示させることが可能です。
コードをテストする際に便利なメソッドです。

# 2.console.warn()
console.warn()メソッドでは警告メッセージを黄色で強調表示させることができます。
警告ログを出力させたい場合に用いることができます。
console.logのオプションについて

# 3.console.clear()
console.clearメソッドではconsoleをクリアすることができます。
consoleがメッセージ等でいっぱいになった際に便利なメソッドです。

# 4.console.time() / console.timeEnd()
この二つのメソッドは併用して用いるメソッドです。
関数の処理時間を知りたいときに用いることで時間を計

await-to-js で非同期処理(Promise)のエラーハンドリングをGoっぽく書こう

API 通信などのエラーハンドリングはどうしていますか？

await したものを try/catch で囲む、もしくは Promise の catch を使うなどがありますが、きちんと1つ1つエラーハンドリングしていくとコードが複雑になりがちです。

[await-to-js](https://github.com/scopsy/await-to-js) はそういったエラーハンドリングの辛さを解消する手段の1つとして効果的です。

https://github.com/scopsy/await-to-js

それでは簡単なエラーハンドリングの例を元に説明していきます。

# 非同期処理のエラーハンドリング

例えば「ユーザーを取得してタスクを保存する」というものを考えてみます。

“`js
async function saveUserTask(userId) {
// ユーザー取得
const user = await fetchUser(userId);
if (!user) {
throw new Error(“存在しないユーザー”);

HTML Canvasのインターフェイスのまとめ #1

HTMLのCanvasを触れ始めたので備忘録として記事に残しておきます。

# 前置き

フロントエンドとかを専門（生業）としているわけではないので、知識や理解が浅い点などはご容赦ください。

# 本記事で触れること

CanvasのfillやlineToなどの各描画のインターフェイスについて触れていきます。画像処理やアニメーション、テキスト関係などは今回は触れません。また、記事にしていて描画関係だけでもかなり長くなったので全ては触れずに記事を分割したりしようと思います（本記事は1つ目の記事に該当します）。

# HTML Canvasって何？（+Canvasの特徴）

– HTMLとJavaScriptを使って描画処理や画像変換などを行える機能です。
– SVGとかでは描画領域が巨大になっても負荷になりにくい（一方で非常に細かい描画で負荷になりやすい）一方でCanvasは描画の範囲が負荷になり、細かい描画とかでは負荷になりにくい特徴を持ちます。つまり描画サイズはそこまで大きくないものの要素が膨大な場合のグラフ描画とかに（SVGよりも）向いています。
– その他ピクセル単位で描画データ

callback関数ってなんだっけ？

# 背景
一度は学んだはずなのにしばらく使ってないとわからなくなることがよくある。callbackもその1つで今まであまり意識して使えていなかったので、メモする

# callback関数とは
– 関数の引数として渡す関数のこと
– 渡ってきた関数をその関数内で実行（call）するからcallback関数

# 例
例えば、以下のようにcallback関数を受け取って実行するrunCallbackとcallback関数であるplusをそれぞれ定義する。
“`sample.js
const runCallback = (a, b, callback) => {
return callback(a, b);
}
const plus = (a, b) => {
return a + b;
}
runCallback(1, 2, plus);
“`
上記を実行すると
“`
3
“`
となる。
# なぜ、callback関数を使う必要があるのか？
結論、渡すcallback関数によって関数の処理を変更ことができるから
例えば先程の例でも新たにminusというcallback

localStorageデータ操作あれこれ（保存、取得、更新、削除など）

# データを保存

“`jsx
localStorage.setItem(“key”, “value”);
“`

## 複数データを保存

“`jsx
let user_data = {
gender: “男性”,
win: 0,
lose: 0
}
localStorage.setItem(“key”, JSON.stringify(user_data)); //JSON形式へ変換
“`

# データを取得

“`jsx
localStorage.getItem(“key”);
“`

## 取得したデータをJSONに変換し出力

“`jsx
JSON.parse(localStorage.getItem(“key”));
“`

JSONに変換する理由は、valueに複数の値がセットされている場合に `“.” で繋ぐことにより値を取得`できるため。

“`jsx
//key => user

//value
{“name”:”田中”,”password”:”xxxxxxx”,”win”:”0″,”lose”:”0″,}

let data = JSO

Youtubeの生放送のコメントを自動で翻訳

# 前置き
## この記事を投稿した経緯
皆さんはVTuberって知ってますか？
詳細な説明はgoogleを検索すればいくらでも出てくるので割愛しますが、最近は生放送が主流になっており、放送中のコメント（ライブチャット）に非常に丁寧に対応されている方も多く見受けられます。

そんな中、ある作業配信を見ていた時のこと。
コメント欄に海外の方が外国語でコメントをしました。
配信者さんは外国語に強くないので、普段はコメント欄に出てきた外国語は片っ端から翻訳ツールにかけているそうなのですが、作業中だと手が離せないのでそれも難しいとのこと。

そこで思いつきました。
それ、自動化できるんじゃないか、と。

そこから先はエンジニアによくある好奇心です。
その人でも別の人でも、使ってくれる人がいれば嬉しいことこの上ないですが、別に誰かのために作るわけじゃなくて、実現方法を考えるのを楽しみたかったという。

## 要件
配信したことがないので分かりませんが、配信者さんは主に下記の方法で画面にコメントを表示しているとのこと。
https://vip-jikkyo.net/youtube-live-cha

CloudFront Function でCookieを読み込み・書き込みする方法

AWSで使えるCDNのCloudFrontで、Edge側で処理を書くために使える機能がCloudFront Functionsです。
従来から使えるLambda＠Edgeに比べて低機能で制約が多いですが、無料利用枠があることやコストが安いので、できればこっちで書いたほうがお得です。

[CloudFront Functions の導入 – 任意の規模において低レイテンシーでコードをエッジで実行 \| Amazon Web Services ブログ](https://aws.amazon.com/jp/blogs/news/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/)

ということで、実際にCloudFront Functionsでどこまでやれるのかも知りたかったので、Cookieを読み書きすることぐらいならできるだろうと思って調べてみました。

## Cookieを読み込む

“`javascript
function handler(event)

IFTTTでobnizとGoogleカレンダーを繋げて、お薬を飲む時間になったら旗を振ってくれるものを作ったよ。

こんにちは
今日はIFTTTを使用して、Googleカレンダーに指定した時間になったら、
obnizに繋げてあるモーターが稼働して、お薬を飲む時間を旗を振って教えてくれるものを作りました。

## 一旦完成したもの

IFTTTでobnizとGoogleカレンダーを繋げて、お薬を飲む時間になったら旗を振って教えてくれるよ?#IFTTT #Googleカレンダー #obniz pic.twitter.com/sIMZnCUee4

— hitomi (@nghrhtm1) May 11, 2022

## 作ろうと思った訳

**①お薬を飲む時間が自動でわかるようにしたい**
**②音でなく目でみてお薬を飲む時間に気づきたい**

私は毎日同じ時間にお薬を飲まないといけません。
「夜の23時に飲むぞ！」と決めていても大体時間がずれます。
（病院の先生からちゃんと毎日同じ時間に飲まないと意味ないからね！と言われている）

スマホを使って通知設定をすれば、音で分かっていいと思いますが、
アラーム音を下げていることもあり、大体気づきません。

**なのでデスクの壁に貼り付けて、目で見てわかる仕組みを作りました。**

## 使用したもの
今回はIFTTTを使用して自動通知できるようにしました。

https://ifttt.com/

* [obniz Boar

Node.jsの雛形の作り方

# Next.jsの雛形の作り方
Node.jsで基本的な操作である雛形の作成を忘れないように残しておく。

## Next.jsの雛形とは(完成品）
雛形とはこのようになっている
この雛形をいじっていくことによって、作りたい形に変化させていく。

## 雛形のフォルダの作り方
* 事前準備として、**node.js**のインストールと**npx**と**yarn**のパッケージをインストールしておく必要がある。
* 雛形のフォルダを下のコマンドを入力して自動作成する。
“`
$ npx create -next -app [フォルダ名]
“`

このようなフォルダが作成される。
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

* 作成後フォルダの中に入り、

TypeScriptを環境構築をして試してみよう

## はじめに
筆者はWindows環境を使用していますので、
もしOSが違う場合は、コマンド部分など自身の環境によって、
適宜読み替えて頂けると良いかと思います。

## Node.jsをインストール

TypeScriptは、最終的にJavaScriptにコンパイル(トランスパイル)されます。
そのためTypeScriptコンパイラのためのNode.jsが必要になります。

[こちら](https://nodejs.org/ja/)からインストーラーをダウンロードします。
特に理由がなければ最新版で良いかと思います。

## TypeScriptコンパイラをインストール
ターミナルやコマンドプロンプトでコマンドを入力し実行します。

“`
npm install -g typescript
“`

これでtscコマンドが使用可能になったので、
バージョンを確認してみます。

“`
tsc -v
Version 4.6.4
“`

このように表示できればOKです。

## tsファイルの作成して画面表示する

拡張子.tsはTypeScriptで使われる拡張子です。
Hell

分散型データ検索プロトコル「The Graph」に挑戦してみる

# はじめに
初めての投稿がかなり特殊なものにはなってしまいますが、Web3やNFT領域のスタートアップでインターンをしているグヌさんです。ブロックチェーンやNFT等に関連するプロダクトの開発において、ブロックチェーンから様々な情報(トランザクション、NFTプロジェクトの関連性、勢いのあるプロジェクトなど)を取得する必要があるのですが、現時点ではブロックチェーンからデータを取得するには、スマートコントラクトやweb3のための特別なコードを書く必要があるため、それだけで大きな負担となります。そこで、ブロックチェーンの情報を検索するための新たな手法として、今回挑戦する「The Graph」が登場します。

:::note warn
注意
この記事ではコードを書かずに概要だけを説明する形になります。
:::

この記事から何度かに分けてThe GraphのDocumentationを攻略していくことを目的としています。

# 今回のテーマ 「The Graph」概要
#### 1. The Graphとは
[公式のドキュメント](https://thegraph.com/docs/ja/ab

【随時更新】個人的に参考になった記事・サイトのまとめ（PHP,Laravel,JavaScript,TypeScript,Three.js…）

# はじめに
個人的に参考になった記事・サイトのまとめです。
技術は問わずですが、主にタイトルに記載のものとなります。

随時更新していきますが、始めは基礎習得に役に立った記事を掲載していきます。

## 基礎
### [freeCodeCamp](https://www.freecodecamp.org/japanese/)
HTML,CSSのようなコーディングからVanillaJS,React,Node.jsなどのプログラミング、
DataBaseの基礎など幅広く無料で学ぶことができます。
アメリカ発のサービスのため英語版しかありませんでしたが、2022年頭から日本語版が出ました。
（翻訳してくれている方感謝です…!）

https://www.freecodecamp.org/japanese/

## PHP
### [PHPでログイン機能を実装するチュートリアル](https://qiita.com/ShibuyaKosuke/items/f114ffccf441edb2b745)

https://qiita.com/ShibuyaKosuke/items/f114f

Javascriptでタイピングアプリを作成してみた

# 現段階のタイピングアプリ
現在のタイピングアプリは以下のようになっています。
[](https://gyazo.com/1084c360e5c598223e3d0ee618f17b12)

# コードは？
このアプリのコードは以下のようになっています。
“`javascript
function ready(){
document.getElementById(“btn”).addEventListener(‘click’,() =>{
let readyTime = 3;
document.getElementById(“btn”).style.visibility = “hidden”;
document.getElementById(“start”).innerHTML = “”;
let readyTimer = setInterval(function(){
docume

React + TypeScript: 要素の見映えのカスタマイズとファイルのドロップによる選択 ー MUIを用いて

``要素を使ったとき、残念なのは見た目です。本稿では、この見映えを改めます。独自にCSSを定めるのも構いません。けれど、ここでは手っ取り早く[MUI](https://mui.com/)(本稿執筆時の最新はv5.6.4)を用いることにしましょう。でき上がるファイル操作のインタフェース作例がつぎのサンプル001です。

#### サンプル001■React + TypeScript: Change style of \ with MUI
https://codesandbox.io/s/react-typescript-change-style-of-input-type-file-with-mui-ufvjqt

この記事は全3回のチュートリアルシリーズの第3回(最終回)です。3回とおして前掲サンプル001ような作例をつくります。``要素を共通に扱うものの、それぞれテーマは別です。興味に応じて、解説を個別に読んでいただいても構いません。

**チュートリアルシリーズ**

GoogleMapAPIを使って、Webページに地図を表示する

# Google Map APIを使って、Webページにマップを表示させる方法

GoogleMapAPIを利用することで、Google Mapの機能をウェブサイトやアプリに埋め込むことができます。
Maps SDK for AndroidやMaps SDK for IOSといったように端末に応じたAPIがありますが、本記事では、Webアプリ用のMaps JavaScript APIを対象とします。

## 1. GoogleMapAPIKeyの取得
Google Maps APIはGoogle Maps API Keyが必須になります。
Keyの取得方法は他の方が纏めた記事があったので、そちらの方をご参照ください。

## 2. GoogleMapAPIの読み込み
Mapを表示させるために、JavaScriptファイルをHTMLで読み込みます。
方法は2つあり、後者の方を多用していました。

### 2-1. HTMLに直接記述する
「YOUR_API_KEY」に1で取得したKeyをコピペし、ブラウザで表示させるとマップが表示されます。
“`index.html

eslint-plugin-simple-import-sort で import の自動ソートを行う

https://zenn.dev/frontier/articles/20220511-eslint-plugin-simple-import-sort のクロスポストです。

—

[Frontier](https://frontierjs.herokuapp.com) では Next.js を採用しており、ESLint では`eslint-config-next`と`eslint-config-prettier`を利用したシンプルな設定にしていたのですが、`import`の記述を整理するために [eslint-plugin-simple-import-sort](https://github.com/lydell/eslint-plugin-simple-import-sort) を採用することにしました。

## `.eslintrc.json` の記述例

以下は現在プロジェクトで実際に使っている`.eslintrc.json`の内容です。

“`json
{
“extends”: [“next/core-web-vitals”, “prettier”],
“pl

IFTTT「観たかった映画が気が付いたら終わってる！」を無くす自動化

# IFTTTとLINE Botでカンタンに「観に行こうと思ってたのにー泣！」を回避
映画好きな私は、観たい映画の情報を映画館の予告やTwitter、街や電車内の広告などで見つけることが多い。なので上映期間をスケジュールにパパっと入れられないシチュエーションも多く、かつもし全部をスケジュールに入れたら予定だらけでスケジュールがゴチャゴチャになっちゃう。
でも入れないと見過ごす！！
**「気が付いたら上映終わってた」のパターンがとても多く、「映画館で観たかったのにー！」って何度なったことか。**
これを手間なくカンタンに解決したい。
今日この自動化に使うのは、[IFTTT](https://ifttt.com/explore)！
## 全体構造／Siri→IFTTT(iOSカレンダー→Googleカレンダー)→LINE Bot
S

価格コムのキープ機能を比較表URLに変換

* 2022/05/11のメモです。
* ほぼ日記調です。本編は`使い方`の項目からです。

https://kakaku.com/

# 価格comのキープ機能は便利だが・・・
* 消えやすく、保存出来ず、送れない。
* ローカルストレージに保存されてる。
* 別のPCや人に送れない。
* サーバーに保存されてない。
* 消える可能性大。
* PC引っ越しでほぼ消える。
* プライバシー系の掃除してたらほぼ消える。
* 送りたいし、消えたら悲しいので、なんとかしたい。

# 他の使えそうな機能
* お気に入り
* 簡単に登録できる
* 比較できない
* ピックアップリストに登録できる
* ピックアップリスト
* 下書きに簡単に追加できる
* 下書きは一枚限定
* 投稿するには、すべての製品にコメント必要？
* ここで諦めた
* 比較表
* 検索結果などからチェックして使える。
* URLなので簡単に送れるし、誰でも見れる。
* 文字も入れれ

React Mui-Materialの数値入力フィールドを使いやすく

Mui-Materialの `Textfield` ですが type=”number” を指定すれば、数値入力用の入力欄が作れます。ただ、これだけだとちょっと使いづらいです

– 入力時の先頭へゼロが残ってしまうことがある
– マウス操作で誤って入力値をユーザーが変更してしまうことがある
– ブラウザによって挙動が違う

これを解消するべく、以下のようなコンポーネントを作りました。
使えそうなシーンがあれば使ってみてね

“`NumericField.tsx
import TextField from “@mui/material/TextField/TextField”;
import { CSSProperties } from “react”;

type P = {
state: string;
setState: React.Dispatch>,
label?: string;
style?: CSSProperties;
required?: boolean;
fullWidth?: boo

Stephen Hawking Discordボットを作った

# Stephen Hawkingボットを作ったよ
皆さんの好きな科学者は誰だろうか？

アリストテレス・アインシュタイン・ノイマン・エジソン…
偉大な科学者を上げていったらきりがないと思う。

私の一番好きな科学者はStephen Hawkingである。
彼の半生を描いた映画、「[The theory of everything](https://www.amazon.co.jp/gp/video/detail/amzn1.dv.gti.9ca9f49d-831f-fbfd-07b0-54b5be9d3720)」は一見の価値があると思う。

ホーキングといえば、車椅子姿に機械音声でしゃべるというのが大きな特徴で、病気にも負けずに真理を追い求める姿には誰もが感動すると思う。
私も勉強のモチベーションが上がらないときは、ホーキング先生の写真を見てモチベーションを上げている。そんな時に、今回のアイデアを思いついてしまった。「ホーキングの声で応援されたら、やる気出るんじゃないか？」と。

## Hawkingの声を作る
Googleで「Hawking voice generator」だとか、