- 1. GoogleスプレッドシートでAssociationを扱うO/Rマッパーもどき SheetQuery
- 2. Recoilで簡単なフィルター機能を実装
- 3. Select2で1つだけしか選択できないようにする
- 4. ApolloClientのベストプラクティスがあったので自分でまとめてみた
- 5. Objectのコピーについて(Javascript)
- 6. console.logでネストが深くてログが見れない時の対処法
- 7. FontAwesomeでアイコンを挿入する
- 8. Canvg v4を使ってブラウザ上でSVGをCanvasに変換する
- 9. JavaScriptでゲームを作る? その１
- 10. ReactとNode.js(express)でAPIの通信を確立する
- 11. フロントエンド開発言語まとめ（JavaScript多め）
- 12. javascript69_GC
- 13. javaScript68_toString()
- 14. 【Docker x Dredd】 hookファイルをJS以外で書く場合の注意点 / Cognitoのトークンを使ってテストを行う
- 15. 【JavaScript】デフォルト引数について
- 16. javaScript67_prototype属性
- 17. Vueでお手軽にGithubの芝をWebアプリに実装できるツールがあったので紹介する
- 18. javascript66_prototype属性
- 19. Index signature（インデックス型）~あのObjectの型を使いたい~
- 20. Voicy.jpの再生スピードを、任意のショートカットキー押下でUP・DOWNできる様にするスクリプト
GoogleスプレッドシートでAssociationを扱うO/Rマッパーもどき SheetQuery
Googleスプレッドシートをデータベース代わりに使うときに、関連付け（Association）も扱いたいですよね。
https://railsguides.jp/association_basics.html
Apps Scriptから使えるQuery専用のO/Rマッパーもどき [SheetQuery](https://script.google.com/d/1qcppOv1DeiBBzUgiwo2yHm0rKld5nndxHI5cw_u1iFC3xUbyFAT5jc6J/edit?usp=sharing) を作ってみました。
# 使い方
Apps Scriptのスクリプトエディターで、ライブラリーを追加します。
スクリプトID
`1qcppOv1DeiBBzUgiwo2yHm0rKld5nndxHI5cw_u1iFC3xUbyFAT5jc6J`## openByUrl(url).from(sheetName).toJson()
スプレッドシートのURL`url`とシート名`sheetName`を指定して、JSON形式でデータを取得します。
“`javascri
Recoilで簡単なフィルター機能を実装
## デモ（codesandbox）
今回使用したコードです → [Demo](https://codesandbox.io/s/infallible-bassi-d42u0?file=/src/App.tsx)
## Recoilとは
meta社が開発したグローバルな状態管理をできるライブラリです。
正式リリースされたばかりだが、シンプルに状態管理をしていけるので最近注目度が高いです。
実際コードが少なく書けるので見通しもよいかと思います。
初学者でRedux使っていないので、どこがどう違って、なにが良くてなにが良くないか分からないですが。。。## インストール
まずパッケージのインストールをします。typescriptの場合は型定義もインストール忘れずに。
“`tsx
npm i recoil
npm i @types/recoil
“`## RecoilRootでコンポーネントをwrapする
Recoilで状態管理する場合、そのグローバルな状態管理をする範囲をRecoilRootで囲む必要があります。プロジェクト全体を範囲とする場合、大元の
を
Select2で1つだけしか選択できないようにする
# はじめに
今まで複数選択OKの利用シーンでのみSelect2を使っていたが、単一選択のケースでも利用する要件がありそうなので、調べたメモ# 環境
– Select2 4.0.X# 方法
[jQuery Select2 で上限ありの複数選択](
https://r17n.page/2019/11/11/jquery-select2-multiple-select-with-limit/) に従って“`maximumSelectionLength“`プロパティに1を設定すればよいかと思ったが、難しく考えず [Single select boxes](https://select2.org/getting-started/basic-usage) のようにmultiple=”multiple” の設定を**しなければよい**だけであった。ただ、Singleの場合、“` allowClear: true “`の設定をした際に表示される X ボタンが**なぜか利かない**現象に見舞われたので、クリアさせたい場合、自前でクリアボタンをつける等しよう。
# サンプル
以下
ApolloClientのベストプラクティスがあったので自分でまとめてみた
## 全てのオペレーションに名前をつける
– 利点
– 意図したオペレーションをフロントとバックエンドで共有ができる
– 予期せぬエラーの回避
– デバックでフロントとバックエンドのどちらに原因があるかを特定するのに役だつ“`graphql
# 推奨 ✅
query GetBooks {
books {
title
}
}# 非推奨 ❌
query {
books {
title
}
}
“`## 変数を利用して引数を提供する
– 実行するuseQueryからvariavlesオプションを利用することで変数を提供することが可能“`javascript
// 推奨 ✅
query GetDog($dogId: ID!) {
dog(id: $dogId) {
name
breed
}
}// 非推奨 ❌
query GetDog {
dog(id: “5”) {
name
breed
}
}function Dog({ id }) {
const { loadi
Objectのコピーについて(Javascript)
javascrptのオブジェクトは単純な代入だと参照が渡されてしまいプロパティに対する編集が共有されてしまう。
“`Javascript
const hoge = { name: ‘hoge’};
let hogehoge = hoge;hogehoge.name = ‘hogehoge’;
console.log(hoge)//{name: ‘hogehoge’}が表示される
“`1階層のオブジェクトであれば新規の配列を作成するmapを使い、参照を共有しないオブジェクトを取得できる。
“`Javascript
const hoge = { name: ‘hoge’};
let hogehoge = [hoge].map( val => ({…val}))[0];hogehoge.name = ‘hogehoge’;
console.log(hoge, hogehoge)//{name: ‘hoge’} {name: ‘hogehoge’}が表示される
“`
しかしオブジェクトがプロパティとしてオブジェクトを持っている場合、ネストされたオブジェクト
console.logでネストが深くてログが見れない時の対処法
## はじめに
検証ツールのConsoleでconsole.logの結果を見る時は、問題なくログを見れると思います。ですが、出力したいログのネストが深いとターミナルで出力されないケースがあります。
#### 見れませんね…
[Object]と出力されてしまってます。この中身を見れるようにしたいと思います。
#### ネストが深い場合、出力したいログをJSON形式にしましょう
“`
console.log(JSON.stringify(‘出力したいログ’, null, 2))
“`実行結果
補足
ちなみに登録はEmailとpasswordだけ入力すればすぐにできます。
FontAwesome公式 https://fontawesome.com/# F
Canvg v4を使ってブラウザ上でSVGをCanvasに変換する
# はじめに
2022年2月17日にCanvgのメジャーアップデートであるv4.0.0がリリースされました。
https://github.com/canvg/canvg/releases/tag/v4.0.0
[前回の記事](https://qiita.com/wm-ytakano/items/d33c3822aa84d695f8e6)では、Canvg v3を使ったSVGからCanvasへの変換方法に説明しましたが、今回はCanvg v4を使った方法について説明します。
https://qiita.com/wm-ytakano/items/d33c3822aa84d695f8e6
とはいえ、破壊的な変更は`Canvg`がデフォルトエクスポートから、名前付きエクスポートに変更されたことが主で、v2からv3への移行時ほどの違いはありません。以下のようにインポート部分を書き換えるだけでよさそうです。
“`javascript:canvg_v3.js
import Canvg from “canvg”;
“`“`javascript:canvg_v4.js
import
JavaScriptでゲームを作る? その１
# はじめに
– JavaScript(JS)でゲームを作ります
– 生のJSで作ります
– TypeScriptなどは使用しません
– 同じようなことをやろうと思った人たちの敷居を上げないため
– HTMLやJS自体の説明はしません
– ゲーム用のライブラリ等は使用しません
– 2Dで作ります
– ブラウザで動かします
– 環境差異は気にしません
– 最新のChromeでのみ動作確認します
– ゲーム内容はとりあえず未定です
– コントローラーを使いたいので、アクション系にはしようかなと考え中# 今回の目次 ?
1. ゲームループを作る ?
1. オブジェクト制御を作る ?
1. FPSを画面に表示する ?
1. ゲームパッドからの入力を作る ?
1. ゲームパッドからの入力を画面に表示する ?
1. プレイヤーキャラを作る ?# ゲームループを作る ?
## 概要
まず初めに、ゲームループを作ります。
ゲームループとは、要は単なる無限ループなのですが、唯一の機能として「一定時間に決まった回数だけ繰り返す」というものがあります。1秒間に6
ReactとNode.js(express)でAPIの通信を確立する
## 概要
サーバーを立ち上げてAPIを叩くという一連の流れを確認してみたかったので、ローカルでフロントエンドとしてReact, バックエンドとしてNode.js(express)を立ち上げてAPI（Fetch）叩いてみる。
フロント側としてはわざわざReactでやる意味はないが慣れているため採用しました。## 1. Node.js(Express)でサーバーを立ち上げる
1. `cd backend`
2. `yarn init`でpackage.jsonを初期化。色々質問されるけど、とりあえずデフォルトでok
2. `yarn add express`でexpressのパッケージをインストール
2. index.jsをbackend配下に作成する
2. index.jsは以下のように記述する“`js
const express = require(“express”);
const app = express(); //express のインスタンス
const port = 3001; // listenするport番号app.get(“/”, (
フロントエンド開発言語まとめ（JavaScript多め）
## はじめに
フロントエンドの勉強をする上で、言語やフレームワークなど多く存在し、名前は知っているけど詳しくは知らない、1つの言語は深い知識・経験はあるが、幅広い知識がないということがあるかと思います。今回はHTML、CSS、JavaScriptの基本からJavaScriptのツールやライブラリなどについて、幅広く調べてまとめてみました。
## まずはHTMLからおさらい
– HTML
– Webページのコンテンツ構造を作るための言語
– タグと呼ばれるコンテンツを階層的に組み合わせることでWebページとなる
– 10年ほど前にHTML5が登場し主流となっていたが2021年に廃止され、現在はHTML Living Standardが標準となっている
– HTML5とHTML Living Standardに大きな違いはないが、使い勝手の良い仕様が追加されている
– 参考：[どうしてHTML5が廃止されたのか](https://future-architect.github.io/articles/20210621a/)– CS
javascript69_GC
GC(garbage collection)
一つのオブジェクトについて、変数や属性から使われない場合は、
Garbageとなります。例：
var obj1 = new Object();
obj1 = null;
ここでobj1はgarbageです。
このようなGarbageオブジェクトに対しては、整理しないとPCの運用スピードが落ちます。
ただし、JSは使わないオブジェクトを自動的に回収してくれるシステムがあるため、人間は何も操作しなくても楽チンです！
そして、var obj= new Object();の中に、変数に使われいているオブジェクトについてJSが自動的に整理してくれなく、人間がもう使わないオブジェクトをnullに設定する必要があります。
そうしたらPCがGarbageを気づいてくれます。
javaScript68_toString()
ブラウザ何を出力するときは、実はtoString()関数の戻り値を出力しています。
上記の例だと、toStringはperの中にだけ追加されている。
全て生成されたインスタンスの中に同じtoStringをアクセスしたければ、toStringをクラスのインスタンスに追加すればOKです。
{
// 処理内容
}
“`## サンプル
処理を確認する簡単なサンプルを書いてみた。“`javascript
function sum(a, b = 5, c = 2) {
return a + b + c;
}console.log(sum()); // NaN
console.log(sum(2)); // 9
console.log(sum(2, 1));
javaScript67_prototype属性
hasOwnPropertyの使い方：
prototypeオブジェクトもオブジェクトです。そのため、指向先のオブジェクトがあります。
属性あるいは方法にアクセスする時、下記の手順になります。
自分の中で探す、自分の中になければ、prototypeのオブジェクトで探す。prototypeオブジェクトの中にもなかれば、prototypeオブジェクトのオブジェクトで探す。
そちらもなければ、undefinedを返す。
コードで書くと、こんな感じです。
関数ごとに原型対象は違います。
普通の関数がprototypeを呼び出しても意味ありません。
関数が構造関数としてprototypeを呼び出す時、構造関数(クラス）から生成された全てのインスタンスには一つの隠された属性はクラスのprototype対象を指しています。
その隠された属性については__proto__でアクセスすることができます。
のObjectは、他のJavaScriptオブジェクトへの参照を保持し、文字列でアクセスできます。コードで実際に見てみましょう
#### 通常
“`ts
export default class Test {
public static id: number = 1
}const id: number = Test.id
“`#### index signatureを使う場合
“`ts
export default class Test {
public static id: number = 1
}const id: Test[‘id’] = Test.id
“`このように`object[property名]`でそのオブジェクトのプロパティーの型を使うことができます。
# Object.pr
Voicy.jpの再生スピードを、任意のショートカットキー押下でUP・DOWNできる様にするスクリプト
“`javascript
/*
2022/02/18
Voicy.jpの再生スピードを、任意のショートカットキー押下でUP・DOWNできる様にするスクリプト。
by rtyaokechrome拡張の「ScriptAutoRunner」等での使用がおすすめ。
https://chrome.google.com/webstore/detail/scriptautorunner/gpgjofmpmjjopcogjgdldidobhmjmdbm?hl=ja-jp
*/
window.onload=function(){// shortcut.jsのインポート用に、DOM要素を作成
let script = document.createElement(‘script’);
script.src = ‘https://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js’;// shortcut.jsが読み込み完了してからショートカット登録
script.onload = f
