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

オブジェクトにプロパティを追加する

# オブジェクトにプロパティを追加する
###Q.オブジェクトってなに？
→JavaScriptにおけるオブジェクトとは、データ（プロパティ）や機能（メソッド）をまとめた情報の集合体のこと

###Q.プロパティってなに？
→ハッシュ形式で書かれている値（データ）のこと

###Q.メソッドってなに？
→プロパティに紐づけられた処理のこと
「〇〇をしてほしい」という処理を、関数を使って表す

####【具体例】

“`Javascript
let human = {
name: “Jhon”

talk: function(){
console.log(`私の名前は${human.name}です`)
}
}

human.talk()
“`
human → オブジェクト
name: “Jhon” → プロパティ
talk → メソッド

##オブジェクトにプロパティを追加する方法
###方法は2種類ある
+ **オブジェクト.プロパティ = 値** で追加する
+ **オブジェクト[‘プロパティ’] = 値** で追加する

###【具体例】

“`

【React】テキストエリアコンポーネントから親コンポーネントにフォームの内容を渡す

子コンポーネントから親コンポーネントに対して値を渡す記事そのものは多少あるのですが、テキストエリア内の値の受け渡し方法というのは、あんまり見受けられなかったため個人用の備忘録です。

“`react:parent.tsx(Signup.tsx)

const Signup: React.FC = () => {
const [email, setEmail] = useState(“”);

return (

) =>
setEmail(event.target.value)
}
/>

{email}

);
};
“`

parent.tsx内ではTextboxコンポーネントにonChange関数を渡しています。帰ってきた値をReactHooksのstateに値を

URLをパースするJavascript

#URLのパースとは

URLの文字列を役割ごとに分解することです。例えば、
https://example.com/dir1/dir2/index.php?aaa=111/bbb&bbb=7#hello
というURLがあったとします。

前から順に、

| 部分 | 名称| 説明 |
|:-:|:-:|:-:|
| https:// | プロトコル (スキームと呼ぶこともある) | この例は Web上のリソースへ「SSLでアクセスする」ことを表しています。|
| example.com | ホスト名、サーバー名 | アクセス先のサーバーを指定しています|
| dir1/dir2/index.php | パス（path、英語の「道、経路」） |サーバーの中の、どのファイル（またはプログラム）にアクセスするか、その位置とファイル名を表しています。 |
| aaa=111/bbb&bbb=7 | クエリー | プログラムに渡す情報（パラメーター）が、「?」の後に続きます。複数のパラメーターは「&」で区切ります。|
| hello | ハッシュ |ブラウザで表示処理す

【Express】Hello Worldを出力する

#プログラミング勉強日記
2021年2月22日
[一昨日の記事](https://qiita.com/mzmz__02/items/03c4bb839a5e5abe02a8)でNode.jsの3大フレームワークについて取り上げた。今日は、ExpressでHello Worldを表示する方法をまとめる。

#Expressを導入する方法
　Node.jsの開発環境が構築されていることを条件とする。Node.jsの環境構築がまだの人は[こちらの記事(Windows版)](https://qiita.com/mzmz__02/items/6cc53f06205fd11367bc)を参考に環境構築してみてください。
　npmを使ってExpressをインストールするだけで、Expressを導入することができる。

“`
$ npm install express
“`

#Hello Worldを出力する
　JavaScriptファイルを作成する。今回は`app.js`という名前のファイルを作成した。ポート番号を8080に設定してるので、今回は`http://localhost

Google DriveのAPIをNode.jsから触るメモ

Google Drive API v3を触ります。
google-auth-token-generatorを使ってtoken.jsonの作成をしてみる版です。

> 以前書いた記事も参考に: https://qiita.com/n0bisuke/items/ff1479cd14e7a0c0be0c

## 環境

* Node.js v15.9.0

## credentials.jsonを取得

チュートリアルを参考にAPIを有効にし、credentials.jsonを手元に保存しましょう。

> https://developers.google.com/drive/api/v3/quickstart/nodejs

## google-auth-token-generatorでtoken.jsonを作成

google-auth-token-generatorを使うとパーミッションをつけたtoken.jsonを作成しやすいです。

> 利用イメージ
> ![](https://camo.githubusercontent.com/91dc29cde99aa2b53b192532

画像遅延読み込み(loading属性 + IntersectionObserver)

# はじめに
担当しているサイトがIE非対応になったため、それとともにパフォーマンス改善処理を見直し画像遅延読み込みが改善の余地があったため今回loading属性+InterSectionObeserverで実装した。

## loading属性
> Chrome 75からサポート。
loading属性とはブラウザがネイティブで遅延ロードをサポートするもの（参照: https://coliss.com/articles/build-websites/operation/work/native-image-lazy-loading.html）

## IntersectionObserber
> Intersection Observer APIは直訳すると交差監視APIという名前です。これは要素と要素の交差を検知するAPIになります。(参照: https://ics.media/entry/190902/)

## 実装
本来、loading属性はHTMLのみで完結しますが、対応ブラウザは`Chrome 76`、`Firefox 75`、`Chromium 版 Edge` においては、

jQueryとは？

# jQueryとは

`jQuery`とは、
>
– JavaScriptでできることを、より簡単な記法で実現できるように設計されたJavaScriptライブラリの一種
– JavaScriptライブラリのデファクトスタンダード

>
`ライブラリ`とは
>>
– 汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたもの
– 体ではプログラムとして動作させることはできない
– 他のプログラムに何らかの機能を提供するコードの集まり

## メリット

マウスオーバーすると色が変わる機能のコードを例として比較

“`js:jQueryを使用
$(function () {
$(document).on(“mouseover”, “h1”, function () {
$(this).css({ “color”: “blue” });
}).on(“mouseout”, “h1”, function () {
$(this).css({ “color”: “” });
})
});
“`

“`js:JavaScriptだけ
wi

ElectronではJavascriptのwindow.promptが使用出来ません。

私はプログラム初心者なのですが、Javascriptで、ある程度動作するWebアプリを作成し、PCでも動作するようにElectronも勉強中です。
しかしながら、Electronでビルドした後に、Javascriptで書いたpromptの機能が動作しない事に気づき、あわててググりましたが、日本語のサイトには情報が少ないので投稿させていただきます。
てか、当たり前のことなのかな？

ElectronではJavascriptのwindow.promptが使用出来ません。まあnot supportedと表示されるので間違いなく動作しないのですが、私の様に初心者の方が気軽にJavascriptで書いたコードがElectronで動くからとGoogle Chromeで確認しながらコードを書いていると、後で泣きをみるかもしれないのでお伝えしておきます。
しかし、この問題というか、この仕様以外にどれほどの影響を受けるのか？は全くわかりませんので、ある程度認識した上で開発を進めるとショック度が少ないかと思います。

代替え案
window.promptはセキュリティ上の問題でサポートされていないようです

【初投稿】リセットCSSを書き記す

昨日から初めての`WEB開発`をスタートさせました！
にしても初めてはわからないことばかり、、、、

今回はリセットCSSを設定し忘れ、意味不明なCSSが反映されている方向けに
コピペで使えるリセットCSSを書き記したいと思います。

**▼リセット！**

“`
*{
margin: 0;
padding: 0;
}
html{
font-size: 16px;
}
body {
font-family: Verdana, “ヒラギノ角ゴ ProN W3”, “Hiragino Kaku Gothic ProN”, “メイリオ”, Meiryo, sans-serif;
}
header, footer, nav, menu, article, aside, section, details, figcaption, figure{
display: block;
}
ul, ol {
list-style: none;
}
table {
border-collapse: collapse;
}
img {
vertical-align: bottom;
}
a img {
bo

【kintone x OCR】OCRシステム　ユーザー登録【GCP】

#はじめに
OCRシステムを構築しました！
30日間無償で利用できますので、是非お試しください！！

#出来ること・画期的なこと

1. OCR結果から必要な情報だけを取得できます。
1. 変換元画像と変換結果を並べて比較できます。
2. アカウント登録すれば、すぐに利用できます。

#アカウント登録
下記に「アカウント申請」という件名（本文なし）でメールを送付頂ければ、数分程度でアカウント情報を返信します。

ocr.lastonemile@gmail.com
* 利用規約に同意の上、ご利用ください。　https://ta

【kintone x OCR】OCRシステム　Vision API arr.by LOM 利用方法【GCP】

#出来ること
kintone上で様々な書類から必要な値を取得します。

例として、この↓画像（請求書）から、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することが出来ます。

＊後述する文書テンプレートを作成することで様々な書類から必要な値を取得できます。

![請求書サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/13655cba-1ef7-40ba-748c-135bc5af

【kintone x OCR】OCRシステム　文書テンプレート作成方法【GCP】

#はじめに
この記事では、OCRシステム（Vision API arr.by LOM）で利用する文書テンプレートについて説明します。

#ユーザー登録
下記の記事より、ユーザー登録してください。
https://qiita.com/Lastonemile/items/65b9102c868e09b3248e

#文書テンプレート
OCRを実施する前に、文書種類毎に文書テンプレートを作成する必要があります。この文書テンプレートは文書の種類（様式）が同様であれば最初に1テンプレート作成すれば大丈夫です。文書の設計図のようなものだとご理解いただければと思います。＊「文書の種類（様式）が同様」とは、具体的にはKEYWORDの文言及びその（大まかな）座標が変わらないことを指します。

#文書テンプレートの作成手順
文書テンプレートの作成手順は、大まかに①Template assistアプリで概要を作成し、（必要があれば）②文書テンプレートアプリで詳細な設定を追記します。（Template assistアプリのみで完結する場合もあります）
文書テンプレートアプリのみで作成することも可能ですが、Te

Amazon Pollyで合成したmp3をHTML5 audioコンポーネントで再生するまで

text -> Polly -> mp3 -> DynamoDB -> api response -> blob -> html5 audio
をやっていきたいと思います。
リアルタイムのAPIに音声合成を組み込む場合の実装例になります。

## 環境
– AWS Lambda + Boto3
– Vue.js

## 前提
S3にファイルを保存するのではなく、バイナリとしてDynamoDBに格納します。
合成音声が短い文章である場合、この方法は十分に有効です。

## Pollyで音声を合成
lambdaからboto3で使っていきます。
リアルタイム変換を行いますが、200文字でもAPIに組み込めるレベルの応答時間(1,000ms程度)です。
ポイントは`response[‘AudioStream’]`がStreamingBodyクラスになります。
https://botocore.amazonaws.com/v1/documentation/api/latest/reference/response.html

“`python
def text_to_speach(text):

Vercelへnext.js使用フロントエンドアプリをデプロイしてみたら楽すぎた。

# Vercelとは？

* [Vercel](https://vercel.com/)とは、ZEIT社が提供しているホスティングサービスです。
* 機能として、Global CDNや、Serverless Functionsがあり、Google CloudやGitHubとのIntegration機能があったり様々なものがあります。
* また、セットアップがかなり簡単で、Next.jsを使用すると簡単にSPA, SSR, SSG, ISRのフロントエンドを作成することができます。
* Netlifyと同じように、ビルドとホスティングなどをまとめてやってくれます。
* 無料プランのままでも100回/日までデプロイできる。

# 早速デプロイしてみよう
## 事前準備
GitHubにあらかじめNext.jsで作成したアプリをpushしておきます。
今回は、pages/indexを下記のようにし、hello worldを表示してみたいと思います。

“`pages/index.js
export default function Index({current}) {
return (

JavaScriptで数値をsort()する時の注意

# 配列の数値を昇順で表示したい（小さい順）
Paziaで問題を解いていて「あれっ？」ってなったので記録。
ある配列

“`
const arr = [‘4′,’6′,’3′,’-10′,’21’,’0′]
// 配列の中身を「文字列」→「数字」
const num = newline.map(Number)
console.log(num)
// [4,6,3,-10,21,0 ]
“`
があるとする。
これを昇順で表示しようとした際に、以下のようにして失敗。

“`
const newNum = num.sort()
console.log(newNum)
// (6) [-10, 0, 21, 3, 4, 6]
“`
このようになってしまうのは、数値は文字列へ変換され、Unicode順になるので小さい順にならないそうです。
よって比較関数を利用します。

“`
const newNum = num.sort((a,b) => a – b);
console.log(newNum)
// (6) [-10, 0, 3, 4, 6, 21]
“`
このようにすると昇順に

MikroORMのはじめ方 – インストールからINSERTとSELECTまで

この投稿は、TypeScript用ORMであるMikro ORMの初歩的なチュートリアルです。データベースはPostgreSQLを用います。

## このチュートリアルで学べること

– Mikro ORMのインストール方法
– Mikro ORMの設定方法
– Mikro ORMでのエンティティの`INSERT`と`SELECT`のやり方

## PostgreSQLを起動する

Mikro ORMは様々なデータベースに対応していますが、今回はPostgreSQLを使いたいので、PostgreSQLサーバーを起動しておきます。

PostgreSQLサーバーを起動するには、Dockerを使うのが手軽なので、それを使います。

docker-compose.ymlを用意します:

“`docker-compose.yml
version: ‘3.7’
services:
db:
image: postgres:11.3
# Make postgres logs. More information about logging, see official docume

フロントエンド開発者のための刺激的なプロジェクト10選

>本記事は、[Simon Holdorf](https://thesmartcoder.dev/author/simon-holdorf/)氏による「[10 Inspiring Ideas for Your Next Front-End Project](https://thesmartcoder.dev/10-inspiring-ideas-for-your-next-front-end-project/)」（2021年1月5日公開）の和訳を、著者の許可を得て掲載しているものです。

ご好評いただいている記事「[2020年にフロントエンド開発者が作りたい9つのプロジェクト](https://qiita.com/baby-degu/items/df70cccf686ad9fe4940)」と、その**2021年改訂版**「[ポートフォリオに役立つJavaScriptプロジェクト40選（動画あり）](https://qiita.com/baby-degu/items/33acb94e404feaf58d35)」**の続編**です。

#フロントエンド開発者のための刺激的なプロジェクト10選

Node.js でローカルファイルに書き込む

「いまさらこんな記事かよ」と思われるかもしれませんが意外と落とし穴にハマる事が多いのでケース毎にまとめておきます。

https://nodejs.org/api/fs.html

## 一気に書き込む場合

### エラーチェックの必要がなくて、データが書き込まれる間ユーザーを待たせることができる場合。

**writeFileSync** を使います。

“`
const fs = require( ‘fs’ )
fs.writeFileSync( ‘some.file’, ‘abc’ )
“`

### エラーチェックが必要であるか、データが書き込まれる間ユーザーを待たせることができない場合。

**writeFile** を使います。

“`
const fs = require( ‘fs’ )
fs.writeFile( ‘some.file’, ‘very long string’, er => { if ( er ) throw er } )
“`

3番目の引数にはエラーが渡ってきます。例えばファイルを`/some.file`のようにしてルートディレクトリに作