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

vistaでillustrator その6

#概要

vistaでillustratorやってみる。
アートボード作って、コッホ曲線書いて、png出力してみた。

#写真


#サンプルコード

“`
var v = [];
var ANGLE = 0;
var LX = 10;
var LY = 100;
function fmod(a, b) {
var x = Math.floor(a / b);
return a – b * x;
}
function turn(a) {
ANGLE = fmod(ANGLE + a, 360.0);
}
function gmove(l) {
var rd = Math.PI / 180.0;
var x = l * Math.cos(rd * ANGLE);
var y = -l * Math.sin(rd * ANGLE);
v

宣言

## 今月これやるぞ!!!
https://www.udemy.com/course/javascript-essence/

Symbolブロックチェーン上で持ってるNFT画像を全部出す。

今回はSymbolブロックチェーン上で展開されるNFTサービスで登録した画像を表示する方法を解説します。

テーマは自分のアカウントが所有しているモザイクトークンに紐づけられた画像情報を全部表示する、ということです。もちろんNFTが紐づいていないモザイクトークンもあります。それらが混ざったなかから、いかに目的の画像を引っ張ってくるかに注目してソースコードを読み解いてみてください。

# 共通

### 検証環境構築

https://qiita.com/nem_takanobu/items/e88d5ea76cd609e76bbf

### 画像挿入の共有化

取得した画像をimgタグに挿入するfunctionを定義しておきます。ここは使い慣れたフレームワークの書き方に変更してください。

“`js
function appendImg(src){

(tag= document.createElement(‘img’)).src = src;
document.getElementsByTagName(‘body’)[0].appendChild(tag);
}

“`

【1日10行コーディング】〜Google Map APIと向き合う〜

## 概要

### 1日10行コーディングとは

まず、1日10行コーディングというのは、1日10行でいいから新しいコード書こうよって感じのやつです(雑)
(1日1記事とか1機能とかだと続かない気がしてしまってる…)

### 実装するもの

最終的に作りたいのは自分でピンを立てた店のアイコンとかを自由に変えられたり、カテゴリごとにアイコン変えたりとかするものが作りたいという気持ち。Google Map my place??とかいうのに近いというか多分おんなじようなのになると思う。

ただ、今日はその前の前の前の前段階くらいのとりあえずマップを表示するページを作ろうと思います。

## 手順

https://www.javadrive.jp/google-maps-javascript/charset/
とりあえずこちらの手順を参考にAPIキーの取得とかをします。
資料古かったのでスクショとかは微妙にあてにならなかった。

1. Google Maps PlatformページのCreating API keys手順に従ってAPIキーを生成する。(https://develope

今日Xpathを覚えた

JavaScroptでうまくプログラミングできてこなかった。

今日、Xpathを覚えた。

xpathの使い方

https://qiita.com/NT1123/items/e8579a6a47eb66441c0a

覚えたっていうのは嘘。見て、聞いたものを、後でQiitaで探したらあった。記録。
これをどう使うかはこれから。予定では今年中に動くようにする。

Xpathとは？Xpathを簡単に紹介する

https://qiita.com/ScrapeStorm-JP/items/a72bbf9e48e59a406962

XPATH Formulas examples ( XPATHのサンプル )

https://qiita.com/Fabral09/items/cfb50f8461e5f27983ed

XPath基礎編（1）ー XPathの基本概念

https://qiita.com/Octoparse_Japan/items/b54e42d696d2311b7b9a

XPath基礎編（2） ー XPathの書き方

https://qiita.com/Octopar

【Rails6】Turbolinksを同居させたままActionCableで非同期通信コメント機能を実装したい！

# なに、同じコメントが２つ、３つ追加されただと…？

というわけでRailsとJavaScriptの初学者がぶつかったTurbolinksという大きな壁について、今回はAjax通信のコメント欄の実装においてどのような課題解決をしたかアウトプットしようと思います。

## 環境
– Ruby : ruby 2.6.5p114 (2019-10-01 revision 67812) [x86_64-darwin20]
– Rails : 6.0.0
– Turbolinks5
– Action Cable 6.0.4.4

## 前提
Turbolinksとはなんぞやという方は以下の記事を参考にしていただきたい。

– [Turbolinks　公式ドキュメント(冪等性の確保)](https://github.com/turbolinks/turbolinks#making-transformations-idempotent)
– [Turbolinks5についてまとめてみる](https://qiita.com/saboyutaka/items/bb089e8208239bf6fdc0

初心者Laravel開発のまとめ

#概要

去年からWeb開発(Laravel)参入、
その前にC,C++はメインです。
まったく別の世界ですが、面白かったです。

転職により技術スタッフが若干変わる予定なので（Web開発は変わらない）
いままで使っていたLaravel開発に関して、問題点などまとめたいと思います。

###1.開発環境
一番最初、もちろんQiitaの記事を参考
[【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン](https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4)
その時点で、PHPの経験もないし、MySQLの経験んもほぼない状態です。
とりあえず、うまく開発始まりました。

Dockerの環境を弄って、だんだんPHPとMySQLのやり方が分かったので、
その後（一か月以降）、WampServerやMySQL Workbenchなどいろいろ良いツール
の存在が知っていて、ローカル環境に移行しました。

デプロイの部分は
会社Azureを使っているので、VSCodeのAzure拡張機能を使って簡単にデプロイできます。

【Jest】mockの初期化ができない時の備忘録

# はじめに
TypeScriptで開発を行う際、テストツールとしてJestを利用しました。
その際、特定のテストに対しモックを設定したのですが、他のテスト結果にも影響してしまったので、Mockの初期化について整理し、備忘録としてまとめてみました。
Math.randomとDate.getMonthのモック化を例に紹介します。

# 目次
1. [モック化と初期化](#Jestでのモック化と初期化方法)
1. [サンプルコード](#サンプルコード)
1. [ハマったところ](#ハマったところ)
1. タイポ
1. 初期化位置
1. afterEach()での初期化

# 環境
node: 16.4.2
ts-node: 10.4.0
typescript: 4.5.5
@types/jest: 27.4.0
jest: 26.6.3
ts-jest: 26.5.6

# Jestでのモック化と初期化方法

## jest.spyOn()でのモック化
random関数が必ず0を返すモック

“`
const spyRandom = jest.spyOn(glob

【Jest】randomやDateのモック化

# はじめに
TypeScriptで開発を行う際、テストツールとしてJestを利用しました。
その時のモック化したコードを備忘録としてまとめてみました。
Math.randomとDate.getMonthのモック化を例に紹介します。

# 環境
node: 16.4.2
ts-node: 10.4.0
typescript: 4.5.5
@types/jest: 27.4.0
jest: 26.6.3
ts-jest: 26.5.6

# サンプルコード
“`sampleMethod.ts
export default class sampleMethod {
public getRandomNumber(): number {
return Math.random()
}
public getMonth(): number {
return new Date().getMonth()
}
}
“`

以下はモックを使う前のテストコード

“`sampleMethod.test.ts
import sampleMet

【obniz×圧電スピーカー】処理(曲)コードをまとめました。 #マンボ #Disney

obniz1Yと圧電スピーカーを使って今まで実装してきた曲のコードのみを公開します。
自分で楽しんでもよし！他の事に使ってもよし！

実際に使った記事は以下になります。

https://qiita.com/yui-kouy/items/d7959be61262a714833f

※obnizの0と1へ圧電スピーカーをつないで使用するソースコードを記載します。

#音符・休符の長さ、音階周波数について
##音符・休符の長さ
音符・休符の長さは、全音符・全休符の長さを基準として定数にします。
【参考】[バンド・スコアの小楽典 – 2. 音譜・休符・拍子](https://www.doremi.co.jp/gakufu_no_mikata/gakufu/basic2.ht

vistaでillustrator その5

#概要

vistaでillustratorやってみる。
アートボード作って、sin波書いて、png出力してみた。

#写真


#サンプルコード

“`
var v = [];
for (var i = 0; i < 400; i++) { var s = Math.sin(i * 2.0 * Math.PI / 100.0) * 200 + 200; v.push([i, s]); } var docRef = documents.add(DocumentColorSpace.RGB, 400, 400); var lineColor = new RGBColor(); lineColor.red = 255; lineColor.green = 0; lineColor.blue = 0; var line = activeDocume

vistaでillustrator その4

#概要

vistaでillustratorやってみる。
アートボード作って、ベジェ曲線書いて、png出力してみた。

#写真


#サンプルコード

“`
var docRef = documents.add(DocumentColorSpace.RGB, 400, 400);
var pObj = activeDocument.pathItems.add();
pObj.filled = false;
pObj.stroked = true;
pObj.strokeWidth = 0.3;
var pt = pObj.pathPoints.add();
pt.leftDirection = [100, 50];
pt.anchor = [100, 100];
pt.rightDirection = [100, 150];
var pt = p

Bookmarkletでネット廃人になろう

## ０．はじめに

この記事は以下に当てはまる方が対象です。

* 初心者
* Chromeでよく調べ物をする
* パソコンを複数持っていてブックマークを同期している
* Chrome拡張機能は便利だけどなんとなくセキュリティが心配
* Javascriptなら少しわかる

そういう貴方にはブックマークレットがおすすめです。

## １．作ったもの

以下のようなものをつくりました。

Bookmarkletは便利、拡張機能つかうまでもない。 pic.twitter.com/gcEuGzg40h

— basictomonokai (@basictomonokai) February 3, 2022<

TypeScript で 関数名の後ろに`string`←コレの正体

# TypeScriptでよくわからない書き方が発生した。

“`typescript
const GlobalStyle = createGlobalStyle`
${restCss}
body{
margin : 0;
padding: 0;
box-sizing: border-box;
}
`;
“`
それはこのような物で、関数の後ろに直接 “ ` “ を使用して文字列を書いている。

## これなら理解できる。
“`typescript
const GlobalStyle = createGlobalStyle(`
${restCss}
body{
margin : 0;
padding: 0;
box-sizing: border-box;
}
`);
“`

# 注意
このQiita記事を書きながら問題解決しているので、無駄に長くなっています。サッっと結果だけ知りたい方は[まとめ](#まとめ)を見たり[CodePen

「Announcing TypeScript 4.6 Beta」を読む

## はじめに

少し前になりますが、TypeScriptのブログで4.6 Betaがアナウンスされました。

Announcing TypeScript 4.6 Beta

個人的に気になるものをメモしてみたいと思います。

## Improved Recursion Depth Checks

再帰的な定義の場合にループ検知するのですかね。今までもヒューリスティックに検知していたので、効果としてはスピードアップということのようです。

## Indexed Access Inference Improvements

[こちら](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-beta/#indexed-access-inference-improvements)より引用:

“`ts
interface TypeMap {
“number”: number;
“string”: string

古いバージョンのSwiper.jsを使ったら詰まったお話 Ver3.4.1

WEBデザイナー＆コーダーのYJ2222です。
JSを使ったスライダープラグインSwiperについてのメモです。

## 経緯と概要
今回は最新(2022/2/3時点)の事についてではなく、古いVerのものになります。
経緯としてはコード改修案件で古いVerのまま実装しなくてはならなくて検索に困ったので自分用にまとめることにしました。
わざわざ古いVerを使うことはないかと思いますが、もし同じ境遇の方いたら助けになれば思います。
ただ詳しくは書けないので、参考程度にお願いします。

▼正式マニュアル（最新版）
https://swiperjs.com/get-started

▼Ver3.4.1で参考にした記事
https://www.willstyle.co.jp/blog/724/

## 完成計コード
先に完成形を載せていきます。

“`html:html