f@ctor

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

JavaScript関連のことを調べてみた2021年12月14日
目次

GraphQLのScalerのIntが32bitの理由を調べた話

この記事は、[Supershipグループ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/supership)の14日目の記事になります。

## はじめに

https://spec.graphql.org/June2018/#sec-Int

>The Int scalar type represents a signed 32‐bit numeric non‐fractional value. Response formats that support a 32‐bit integer or a number type should use that type to represent this scalar.

GraphQLのScalerのIntは32bitと定義されてあり、いまどきにしては扱える数値の範囲が狭い理由が何故なのかが気になり、調べた話です。

## graphql-spec

https://github.com/graphql/graphql-spec/issues/73#issueco

元記事を表示

スタックのアップグレード：Newfrontのケーススタディ

マーケティングチームとプロダクトチームを切り離さなければならないときはどうしますか？そういう場合はスタックをアップグレードしましょう。

著者：Bruno Aderaldo 2020年8月10日
原文：https://bejamas.io/blog/upgrading-the-stack-newfront-case-study/

![Upgrading-the-Stack-Newfront-Case-Study.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1242415/be4d7e34-dfc3-682c-6999-ee753f7e18d1.jpeg)

以前、ウェブサイトの再構築の必要性と、古いウェブサイトがビジネスに悪影響を及ぼす可能性があることをお話しました。Newfrontのサイトではそうではありませんでしたが、使用しているスタックのせいで、ワークフローがやや大変でした。

このマーケティングサイトでは、もともと複雑なテンプレートシステムが使われており、何かを公開したいときにはチーム間での

元記事を表示

コピペで動くXYMの残高チェック【Vue.js編 初心者向け】

# はじめに

この記事ではVue.jsでSymbolのアカウントが保有しているモザイク情報(今回はXYMのみ)を表示するWEBプログラムを作成します。
Vue.jsとSymbolの非同期の親和性はそれなりに良いと思うので導入編としては扱いやすいと思います。
また、ある程度はプログラミングが出来る人を前提に話を進めます。（Vue.jsの詳しい解説はしません）
このプログラムはWEBブラウザでファイルを開くだけで実行出来るのでVue.jsはわからないけどちょっと試してみたい、と思っている人も是非やってみてください。

# 必要なもの
* PC
* インターネット接続環境
* テキストエディタ（VSCodeを推奨）
* Google Chromeブラウザ
* めげない心

いきなりソースコード全文いきます。（後で解説します）
まずは、下記のコードをindex.htmlと名前を付けてPCのデスクトップに保存してください。

“`html




元記事を表示

Python×JavaScriptでOCR機能付きDeepLアプリケーションを作ってみた

# きっかけ
何て書いてあるんだ…?
![sketch-1639422869518 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/240141/923712d1-8992-d738-aa9d-b4ef9ab6f1d0.png)
それは専門外な内容の英語プレゼンを聴講したある日のこと．

普段であればレジェメのPDFが配布され，テキストをコピーしてDeepLに投げることで内容を把握することができるのですが，この日はTeamsの映像でしか見ることができなかったので，専門外な内容だったことも相まって内容を理解するのに苦労しました．

「OCRしてDeepLに投げることができればいいのに…」

ということでOCR機能付きDeepLデスクトップアプリケーションを作りました．

# Summary of technical topics
– GUI: Eel(Python)
– OCR: Tesseract
– Focus the window: Chrome extension (`chrome.

元記事を表示

マルチシグで0XYMからのNFT発行と疑似levy機能を実現する

#SymbolでのNFTの発行について
Symbolでも他の仮想通貨同様にNFTのサービスがあり，主にモザイクを利用したNFT発行サービスが展開されています．モザイクを利用したNFT発行の場合，モザイク発行手数料（現行では50XYM）がかかります．このため，発行したNFTを50XYM以下で販売すると発行者が手数料負けします．

そこで今回はマルチシグを使って現在の仕組みでモザイク発行手数料が不要な，つまり今までよりも50XYM安く発行できるマルチシグアドレス型のNFTを実現することを目標にしてみました．

#マルチシグでNFTを再現する
###NFTの取引では何がやりとりされているのか
モザイク型のNFTを知るため，SymbolのNemberArtのNFTを調べてみます.

こちらは私がNemberArtで購入させて頂いたNFTです.

https://nember.art/art?id=5B3F2FFBCF29A2DF

![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1974869/8

元記事を表示

SVG.jsのテキストについて詳しく調べてみる

[SVG.js](https://github.com/svgdotjs/svg.js)のライブラリのテキスト関係の仕様について色々コードを書いて試しつつ確認していくための記事です。

# 使うもの

– SVG.js v3.1.1
– JSFiddle （例 : https://jsfiddle.net/yar6x4hk/7/ ）

# 前提

SVGの仕様上、普通のHTMLのテキストでさくっとできることができないケースが結構あります（固定幅によるテキストの折り返しなど）。一方で複雑なアニメーションなどでSVGのテキストの方が自由度が高いケースがある・・・といった感じのようです。SVGで大半のことができる・・・というわけではないので使い分けが必要そうです。

# Textクラス

以降の節でテキストを扱う基本のクラスとなるTextクラスについて触れていきます。

## インスタンスの作り方

`text`メソッドで引数に文字列を指定することで作成できるようです。

“`js
var draw = SVG().addTo(‘body’).size(500, 300);

var te

元記事を表示

モダンなJavascriptフレームワークまとめてみた　~Nuxt.js編

## Nuxt.jsとは？
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/965248/0345893e-4e68-e667-e7ff-b5138ed8bef1.png)

Nuxt.jsは、
Vue.js をベースにした JavaScript フレームワークです。**「ナクスト」**と読みます。
間違えて「ヌクスト」と読む人がいますが、間違いです。気をつけましょう。

**公式ドキュメント**
– [公式ドキュメント：英語](https://nuxtjs.org/)
– [公式ドキュメント：日本語](https://nuxtjs.org/ja/)

### Nuxt生誕
2016年にAlexandre Chopin（アレクサンドラ・ショパン）、Sébastien Chopin（セバスチャン・ショパン）、Pooya Parsa（プーヤ・パラサ）氏らによりリリースされました。

Nuxt.js（React.jsをベースにしたJavascriptフレームワーク）に触発されて作られたらしいで

元記事を表示

Reactを使うためのJavaScript

この記事は、[マイナビ Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mynavi) 14日目の記事です。

# はじめに
この記事は、Reactを触る上で必要なJavaScriptの基本知識をいくつか紹介します。

`if`や`for`は扱える上で、JavaScript特有の書き方などをつらつら書いています。

今はJavaScriptよりTypeScriptの方が主流ですが、TypeScriptもJavaScriptから派生した言語なので、ここら辺の基礎知識はTypeScriptを扱う上でも大切になってくると思います。

これからReactを触る方が、少しでも参考になれば幸いです。

# 基本知識
## var・const・let
今までは、変数・定数はすべて`var`で宣言していたものを、`const`を定数、`let`を変数として扱えるようになりました。
ここで言いたいことは、「`var`は使わないようにしよう」です。

下記のコードでは、`const`を使用して、書き換えが出来ないようにしています。

元記事を表示

【kintone】アプリ同士のデータを連結してCSV出力する

##はじめに
kintoneのアプリ同士のデータを連結してCSV出力する方法について紹介します！

関連レコードを用いてCSV出力する方法はcybozu developer networkにて紹介されています。こちらのコードを基に自分でカスタマイズを行いました。
[関連レコードのデータをCSV出力する方法
](https://developer.cybozu.io/hc/ja/articles/203605844-%E9%96%A2%E9%80%A3%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92CSV%E5%87%BA%E5%8A%9B%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95)

今回は関連レコードを用いず、別アプリのテーブルにて複数登録されているデータとの連結方法について紹介を行っていきます。

##アプリの構成
### サンプル１アプリ
![image.png](https://qiita-image-store.s3.ap-north

元記事を表示

Vue3.2から追加された