f@ctor

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

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

javascriptをudemyで学んでみた（関数とオブジェクト編）

udemyの[ガチで学びたい人のためのJavascriptメカニズム](https://www.udemy.com/course/javascript-essence )という講座を受講しまして、
自分の言葉でまとめたいなと思ったのでこの記事を書きました。

最近エンジニアになったばかりですので暖かい目で見ていただければと思います

# jsを学ぶ理由
シンプルに「Reactを使ってみたいなー」と思ったからです
しかし、どうやらReactを使うにはjsの基礎がわかっていないと話にならんとのことだったので、とりあえず素のjsしっかり学ぼうと思いました。教材に触れる前の自分のレベル感としては「プログラミングの基礎はある程度わかる」「DOM操作も何となくわかる」「非同期処理はJQueryを使ってならやったことある」です

ちなみに知らなかった用語としては「スコープ」「クロージャー」「モジュール」などです
（スコープに関しては今まで意識して使ったことがないというのが正しいかもです）

# Reactに必要な知識
[こちら](https://dev-k.hatenablog.com/entry/

元記事を表示

React Query(v4)使ってみたので、使い方をまとめてみた

# TL;DR

– VercelのSWRとReduxをまとめたような機能を持つライブラリー
– fetchのコントロール、データの整形、オフライン対応等が含まれている
– 強力なdevtoolあり

# 概要

[公式ドキュメント](https://tanstack.com/query/v4/docs/overview)

[チュートリアル](https://tkdodo.eu/blog/practical-react-query)

作成物：[レポジトリ](https://github.com/rowaxl/react-query-tutorial)

上記チュートリアルの題材に沿って、基本的なTODOアプリを作ってみたので、使い方と特徴をまとめたく思います。

## Installation

“`bash
$ npm install @tanstack/react-query
$ yarn add @tanstack/react-query
“`

アプリケーショントップで、プロバイダーを用意

“`jsx
// index.tsx

import {
QueryC

元記事を表示

【kintone x OCR】～OCR結果確認編～　kintoneのOCRプラグインを開発する⑦【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。
![請求書サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/13655cba-1ef7-40ba-748c-135bc5af3280.jpeg)

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（OCR結果確認編）の目標
前回（⑥）の通り、最終目標については、達成出来ました↓。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/7c5bcd75-9661-42ce-94ba-7cccc228b4d4.png)

ただし、現

元記事を表示

【kintone x OCR】～マスター置換編～　kintoneのOCRプラグインを開発する⑥【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。
![請求書サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/13655cba-1ef7-40ba-748c-135bc5af3280.jpeg)

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（マスター置換編）の目標
前回（⑤）の最後で今後の課題とした、「品名」列の値を取得したいと思います。
![KEYWORZONE正規表現文字置換.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/5cfccd47-abb2-d7df-d10c-bee

元記事を表示

【kintone x OCR】～文字列置換編～　kintoneのOCRプラグインを開発する⑤【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。
![請求書サンプル.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/13655cba-1ef7-40ba-748c-135bc5af3280.jpeg)

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（文字列置換編）の目標
前回（④）の最後で今後の課題とした、文字単位での認識違いの対策を説明したいと思います。対象となるのは↓の「単価」列の5行目で100を10Dと認識違いしていますので、100と取得できるようにしたいと思います。
![KEYWORZONE正規表現.PNG](https://qiita-image-store.s3.ap-n

元記事を表示

JSの非同期処理[Promise/async/await]と仲良くなる

javascriptの非同期処理（Promise/async/await）仲良く出来ていますか？
自分は、結構苦戦していました。
非同期処理は、プログラミングをみっちり構造的に理解している人ほど、罠に陥りやすいんじゃないかと思っています。
特に、構造化プログラミングを信奉していてフローチャート的に考える習慣のある人は、たちまち破綻して地獄を見ます。
javascriptの場合、外部とのやり取りをしていない場合は比較的平穏にコーディングを進められるんですが、外部とのやり取り、つまりajaxリクエスト・DBへのアクセスetcを扱うようになると非同期の世界へ一気に引き摺り込まれます。
自分の場合、ajax処理なんかは従来のjsのコールバック処理で何とこなすことが出来ていたのですが、nodejsでDBやファイルを扱うようになってからハマるようになって来ました。

始終jsを使う仕事なら非同期処理などは身体に叩き込まれるんでしょうけど、使ったり使わなかったりして、その度に知識がリセットされるのも悔しいし無駄なので、自分の忘備録として用意しておきます。
場合によっては他人様にも役に立つかも知れませ

元記事を表示

【XSS】PHPからJSへ配列を渡しJSON.parseで解析すると脆弱性があるよという話

# はじめに
PHPからJSへ配列を渡しJSON.parseにかけると脆弱性がある、この話はそこそこ前からある気がします。
ただ、最近もGoogleで検索するとJSON.parseを使用した記事を目にすることがあります。
そこで、今回はJSON.parseを使用した時にXSSの脆弱性があるという話、JSON.parseを使用しなくても配列を渡せるという話を書いていきます。

# JSON.parseで解析するとXSSの脆弱性がある
XSSの脆弱性があるため配列内のJSコードが認識されます。
コードは下記のようなコードです。
“`php